Merge pull request #8 from e-roy:refresh-button-for-vision

feat:refresh button
e-roy · Dec 21, 2023 · c2d021a · c2d021a
2 parents 9434ff7 + 2aa9a59
commit c2d021a
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 32 deletions.
diff --git a/src/app/api/gemini-vision/route.ts b/src/app/api/gemini-vision/route.ts
@@ -39,6 +39,7 @@ export async function POST(req: Request) {
   // console.log(temperature, maxLength, topP, topK);
   // console.log(media, media_types);
   // console.log(safety_settings);
+  // console.log("message =================>", message);
 
   const userMessage = message;
 

diff --git a/src/components/ChatContainer.tsx b/src/components/ChatContainer.tsx
@@ -72,11 +72,7 @@ export const ChatContainer = () => {
             </div>
           ))}
           <div ref={messagesEndRef} />
-          {loading && (
-            <div className="mt-6 bg-primary/10 dark:bg-primary/10 px-4 py-4 rounded-lg m-4 justify-start w-16">
-              <TypingBubble />
-            </div>
-          )}
+          {loading && <TypingBubble />}
         </div>
         <CommonForm
           value={input}

diff --git a/src/components/TypingBubble.tsx b/src/components/TypingBubble.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 export const TypingBubble: React.FC = () => {
   return (
-    <div className="flex items-center space-x-1">
+    <div className="flex items-center space-x-1 mt-6 bg-primary/10 dark:bg-primary/10 px-4 py-4 rounded-lg m-4 justify-start w-16">
       <div className="typing-dot bg-primary/50 h-2 w-2 rounded-full animate-typing-bounce" />
       <div
         className="typing-dot bg-primary/50 h-2 w-2 rounded-full animate-typing-bounce"

diff --git a/src/components/VisionContainer.tsx b/src/components/VisionContainer.tsx
@@ -1,13 +1,16 @@
 "use client";
 // componnets/VisionContainer.tsx
 import React, { useState, useCallback } from "react";
-import { MarkdownViewer } from "@/components/MarkdownViewer";
+import { useControlContext } from "@/providers/ControlContext";
 import { Card } from "@/components/ui/card";
 
-import { useControlContext } from "@/providers/ControlContext";
+import { MarkdownViewer } from "./MarkdownViewer";
 import { CommonForm } from "./CommonForm";
 import { TypingBubble } from "./TypingBubble";
 
+import { RefreshCcw } from "lucide-react";
+import { Button } from "./ui/button";
+
 export const VisionContainer = () => {
   const { generalSettings, safetySettings, mediaDataList } =
     useControlContext();
@@ -26,33 +29,24 @@ export const VisionContainer = () => {
     );
   }, [prompt, mediaDataList]);
 
-  const handleSubmitForm = useCallback(
-    async (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-
-      if (!isFormSubmittable()) return;
-      setLoading(true);
-      setUserQuestion(prompt);
-      setResult("");
-      setPrompt("");
-
+  const makeApiCall = useCallback(
+    async (message: string) => {
       // Filter out any invalid image data
       const validMediaData = mediaDataList.filter(
         (data) => data.data !== "" && data.mimeType !== ""
       );
 
-      // If there are no valid images and the prompt is empty, do not proceed
+      // If there are no valid images and the message is empty, do not proceed
       if (validMediaData.length === 0) return;
+      if (message.trim() === "") return;
 
       const mediaBase64 = validMediaData.map((data) =>
         data.data.replace(/^data:(image|video)\/\w+;base64,/, "")
       );
       const mediaTypes = validMediaData.map((data) => data.mimeType);
 
-      // console.log(mediaBase64.length, mediaTypes);
-
       const body = JSON.stringify({
-        message: prompt,
+        message,
         media: mediaBase64,
         media_types: mediaTypes,
         general_settings: generalSettings,
@@ -82,32 +76,60 @@ export const VisionContainer = () => {
             accumulator += text;
             setResult(accumulator);
           }
-          setLoading(false);
         }
       } catch (error) {
         if (error instanceof Error) {
           setResult(`Error: ${error.message}`);
-          setLoading(false);
         }
+      } finally {
+        setLoading(false);
       }
-      // };
     },
-    [generalSettings, safetySettings, mediaDataList, prompt]
+    [mediaDataList, prompt, generalSettings, safetySettings]
+  );
+
+  const handleRefresh = useCallback(() => {
+    if (!userQuestion) return;
+    setLoading(true);
+    setResult("");
+    makeApiCall(userQuestion);
+  }, [userQuestion, makeApiCall]);
+
+  const handleSubmitForm = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+
+      if (!isFormSubmittable()) return;
+      setLoading(true);
+      setUserQuestion(prompt);
+      setResult("");
+      setPrompt("");
+
+      await makeApiCall(prompt);
+    },
+    [isFormSubmittable, makeApiCall, prompt]
   );
 
   return (
     <div className="flex flex-col h-[95vh]">
       <Card className="flex flex-col flex-1 overflow-hidden">
         {userQuestion && (
-          <div className="bg-primary/20 p-4">{userQuestion}</div>
+          <div className="bg-primary/20 p-4 flex space-x-4">
+            <Button
+              type={`button`}
+              variant={`icon`}
+              onClick={handleRefresh}
+              disabled={loading}
+            >
+              <RefreshCcw className={`w-4 h-4`} />
+            </Button>
+
+            <div>{userQuestion}</div>
+          </div>
         )}
         <div className="flex-1 overflow-y-auto p-4">
           <MarkdownViewer text={result} />
-          {loading && (
-            <div className="mt-6 bg-primary/10 dark:bg-primary/10 px-4 py-4 rounded-lg m-4 justify-start w-16">
-              <TypingBubble />
-            </div>
-          )}
+          {loading && <TypingBubble />}
           {mediaDataList.every(
             (media) => media === null || media?.data === ""
           ) && (