From a1869170fba744cb2f1ccc2ae0e6660a83cb1397 Mon Sep 17 00:00:00 2001
From: Rashad Philizaire <rashadphilizaire@gmail.com>
Date: Sat, 1 Jun 2024 10:52:46 -0400
Subject: [PATCH] related prompts and image skeleton

---
 src/backend/prompts.py                        |  2 +-
 src/backend/related_queries.py                |  4 +-
 .../src/components/assistant-message.tsx      | 22 +++-------
 src/frontend/src/components/image-section.tsx | 41 +++++++++++++++++++
 4 files changed, 49 insertions(+), 20 deletions(-)
 create mode 100644 src/frontend/src/components/image-section.tsx

diff --git a/src/backend/prompts.py b/src/backend/prompts.py
index 120906f..ee95a18 100644
--- a/src/backend/prompts.py
+++ b/src/backend/prompts.py
@@ -38,7 +38,7 @@
 {context}
 </context>
 
-Your 3 follow-up questions:
+Your EXACTLY 3 (three) follow-up questions:
 """
 
 HISTORY_QUERY_REPHRASE = """
diff --git a/src/backend/related_queries.py b/src/backend/related_queries.py
index 5759878..09f590e 100644
--- a/src/backend/related_queries.py
+++ b/src/backend/related_queries.py
@@ -44,8 +44,8 @@ async def generate_related_queries(
     query: str, search_results: list[SearchResult], model: ChatModel
 ) -> list[str]:
     context = "\n\n".join([f"{str(result)}" for result in search_results])
-    # Truncate the context to 5000 characters (mainly for smaller models)
-    context = context[:5000]
+    # Truncate the context to 4000 characters (mainly for smaller models)
+    context = context[:4000]
 
     client = instructor_client(model)
     model_name = model_mappings[model]
diff --git a/src/frontend/src/components/assistant-message.tsx b/src/frontend/src/components/assistant-message.tsx
index 4bf2bb9..c912800 100644
--- a/src/frontend/src/components/assistant-message.tsx
+++ b/src/frontend/src/components/assistant-message.tsx
@@ -5,6 +5,7 @@ import { SearchResultsSkeleton, SearchResults } from "./search-results";
 import { Section } from "./section";
 import { AlertCircle } from "lucide-react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { ImageSection, ImageSectionSkeleton } from "./image-section";
 
 export function ErrorMessage({ content }: { content: string }) {
   return (
@@ -73,23 +74,10 @@ export const AssistantMessageContent = ({
         )}
       </Section>
       <Section title="Images" animate={isStreaming}>
-        {images && images.length > 0 && (
-          <div className="my-4 grid grid-cols-1 gap-2 lg:grid-cols-2">
-            {images.map((image) => (
-              <a
-                key={image}
-                href={image}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="aspect-video w-full h-full overflow-hidden hover:scale-[1.03] duration-150 rounded-lg transition-all shadow-md"
-              >
-                <img
-                  src={image}
-                  className="w-full object-cover object-top h-full max-h-[80vh]"
-                />
-              </a>
-            ))}
-          </div>
+        {images && images.length > 0 ? (
+          <ImageSection images={images} />
+        ) : (
+          <ImageSectionSkeleton />
         )}
       </Section>
       {relatedQuestions && relatedQuestions.length > 0 && (
diff --git a/src/frontend/src/components/image-section.tsx b/src/frontend/src/components/image-section.tsx
new file mode 100644
index 0000000..9d590bd
--- /dev/null
+++ b/src/frontend/src/components/image-section.tsx
@@ -0,0 +1,41 @@
+/* eslint-disable @next/next/no-img-element */
+"use client";
+import { Skeleton } from "./ui/skeleton";
+
+export const ImageSectionSkeleton = () => {
+  return (
+    <>
+      <div className="my-4 grid grid-cols-1 gap-2 lg:grid-cols-2 w-full">
+        {[...Array(4)].map((_, index) => (
+          <div className="w-full h-full" key={`image-skeleton-${index}`}>
+            <Skeleton className="rounded-md object-cover shadow-none border-none w-full bg-card h-[160px] " />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export function ImageSection({ images }: { images: string[] }) {
+  if (images && images.length > 0) {
+    return (
+      <div className="my-4 grid grid-cols-1 gap-2 lg:grid-cols-2">
+        {images.map((image) => (
+          <a
+            key={image}
+            href={image}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="aspect-video w-full h-full overflow-hidden hover:scale-[1.03] duration-150 rounded-lg transition-all shadow-md"
+          >
+            <img
+              src={image}
+              className="w-full object-cover object-top h-full max-h-[80vh]"
+            />
+          </a>
+        ))}
+      </div>
+    );
+  }
+  return null;
+}