Merge pull request #98 from Technoculture/image

Technoculture · Sep 25, 2024 · 1eaac53 · 1eaac53
2 parents 1a4386c + 6513171
commit 1eaac53
Show file tree

Hide file tree

Showing 11 changed files with 392 additions and 130 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -19,6 +19,7 @@ jobs:
       - name: Lint and fix
         run: npm run lint:fix
         env:
+          ANTHROPIC_API_KEY: ${{secrets.ANTHROPIC_API_KEY}}
           TURSO_DB_URL: ${{secrets.TURSO_DB_URL}}
           TURSO_DB_AUTH_TOKEN: ${{secrets.TURSO_DB_AUTH_TOKEN}}
           OPEN_AI_API_KEY: ${{secrets.OPEN_AI_API_KEY}}

diff --git a/package.json b/package.json
@@ -111,6 +111,7 @@
     "react-mic": "12.4.6",
     "react-syntax-highlighter": "15.5.0",
     "react-textarea-autosize": "8.4.1",
+    "react-use-wake-lock": "^1.0.1",
     "remark-gfm": "3.0.1",
     "remark-math": "^6.0.0",
     "remark-rehype": "10.1.0",

diff --git a/src/app/api/imageInput/route.ts b/src/app/api/imageInput/route.ts
@@ -10,6 +10,7 @@ import { NextApiResponse } from "next";
 import { StreamingTextResponse, LangChainStream } from "ai";
 import { systemPrompt, ellaPrompt } from "@/utils/prompts";
 import { chattype } from "@/lib/types";
+// import { ChatAnthropic } from "langchain/chat_models/anthropic";
 
 export const maxDuration = 60; // This function can run for a maximum of 5 seconds
 export const dynamic = "force-dynamic";
@@ -77,6 +78,7 @@ export async function POST(request: Request, response: NextApiResponse) {
       { status: 400 },
     );
   }
+  console.log("imageFile", imageFile);
   const parts = imageFile.name.split(".");
   const extension = parts[parts.length - 1];
   let awsImageUrl = "";
@@ -153,6 +155,13 @@ export async function POST(request: Request, response: NextApiResponse) {
         },
       ],
     });
+    // const anthropic = new ChatAnthropic({
+    //   anthropicApiKey: env.ANTHROPIC_API_KEY,
+    //   streaming: true,
+    //   modelName: "claude-3-sonnet-20240229",
+    //   callbacks: [handlers]
+    // });
+    // const str = anthropic.call([...msg, message], {}, [handlers])
     const str = chat
       .call([...msg, message], {}, [handlers])
       .catch(console.error);

diff --git a/src/app/env.mjs b/src/app/env.mjs
@@ -3,6 +3,8 @@ import { z } from "zod";
 
 export const env = createEnv({
   server: {
+    // Anthropic
+    ANTHROPIC_API_KEY: z.string().min(10),
     // OpenAI
     OPEN_AI_API_KEY: z.string().min(10),
     // LLaMA-2-7B-32K-Instruct (7B) from https://api.together.xyz
@@ -62,6 +64,8 @@ export const env = createEnv({
   },
 
   runtimeEnv: {
+    // Anthropic
+    ANTHROPIC_API_KEY: process.env.ANTHROPIC_API_KEY,
     // Clerk (Auth)
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
       process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -59,6 +59,27 @@ export default function Home() {
     "model",
     parseAsString.withDefault("chat"),
   );
+  const [imageUrl, setImageUrl] = useQueryState(
+    "imageUrl",
+    parseAsString.withDefault(""),
+  );
+  const [imageName, setImageName] = useQueryState(
+    "imageName",
+    parseAsString.withDefault(""),
+  );
+  const [imageType, setImageType] = useQueryState(
+    "imageType",
+    parseAsString.withDefault(""),
+  );
+  const [imageSize, setImageSize] = useQueryState(
+    "imageSize",
+    parseAsString.withDefault(""),
+  );
+  const [imageExtension, setImageExtension] = useQueryState(
+    "imageExtension",
+    parseAsString.withDefault(""),
+  );
+  const [dropzoneActive, setDropzoneActive] = useState<boolean>(false);
 
   const { isSignedIn, orgId, orgSlug, userId } = useAuth();
   // if (isSignedIn) {
@@ -76,13 +97,31 @@ export default function Home() {
     try {
       const res = await fetch(`/api/generateNewChatId/${orgId}`, {
         method: "POST",
-        body: JSON.stringify({ type: "chat" }),
+        body: JSON.stringify({ type: chatType || "chat" }),
       });
       const data = await res.json();
 
-      router.push(
-        `/dashboard/chat/${data.newChatId}?new=true&clipboard=true&model=${chatType}&input=${input}`,
-      );
+      if (dropzoneActive) {
+        const queryParams = new URLSearchParams(window.location.search);
+        const params: { [key: string]: string } = {};
+        queryParams.forEach((value, key) => {
+          params[key] = value;
+        });
+        const params2 = {
+          ...params,
+          new: "true",
+          clipboard: "true",
+          model: chatType,
+          input: input,
+        };
+        const queryParamsString = new URLSearchParams(params2).toString();
+
+        router.push(`/dashboard/chat/${data.newChatId}?${queryParamsString}`);
+      } else {
+        router.push(
+          `/dashboard/chat/${data.newChatId}?new=true&clipboard=true&model=${chatType}&input=${input}`,
+        );
+      }
     } catch (error) {
       console.error("Error creating new chat:", error);
     }
@@ -120,6 +159,18 @@ export default function Home() {
                 {isSignedIn && orgId && orgSlug ? (
                   <div className="w-full md:min-w-[400px] lg:min-w-[600px] xl:min-w-[800px] ">
                     <InputBar
+                      imageExtension={imageExtension}
+                      setImageExtension={setImageExtension}
+                      dropzoneActive={dropzoneActive}
+                      setDropzoneActive={setDropzoneActive}
+                      imageUrl={imageUrl}
+                      setImageUrl={setImageUrl}
+                      imageName={imageName}
+                      setImageName={setImageName}
+                      imageType={imageType}
+                      setImageType={setImageType}
+                      imageSize={imageSize}
+                      setImageSize={setImageSize}
                       isHome={true}
                       value={input}
                       onChange={handleInputChange}
@@ -133,7 +184,7 @@ export default function Home() {
                     />
                     <div className="flex flex-col gap-y-4">
                       <OrgChatToggler orgId={orgId} orgSlug={orgSlug} />
-                      <div className="w-full md:w-[400px] lg:w-[600px] xl:w-[800px] h-[500px] overflow-y-scroll scrollbar-hide">
+                      <div className="w-full md:w-[400px] lg:w-[600px] xl:w-[800px] h-[500px] overflow-y-scroll scrollbar-hide self-center">
                         <ChatCardWrapper
                           isHome={true}
                           org_id={orgId}

diff --git a/src/components/VadAudio.tsx b/src/components/VadAudio.tsx
@@ -6,6 +6,7 @@ import { Microphone, StopCircle } from "@phosphor-icons/react";
 import { Button } from "@/components/button";
 import { cn } from "@/lib/utils";
 
+import useWakeLock from "react-use-wake-lock";
 interface VadAudioProps {
   onAudioCapture: (audioFile: File) => void;
   onStartListening: () => void;
@@ -24,6 +25,12 @@ export default function VadAudio({
   const audioChunks = useRef<Blob[]>([]);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const startTimeRef = useRef<number | null>(null);
+  const { isSupported, isLocked, request, release } = useWakeLock({
+    onError: () => {
+      console.error("Error requesting wake lock");
+    },
+    onRelease: () => {},
+  });
 
   const vad = useMicVAD({
     onSpeechEnd: (audio: Float32Array) => {
@@ -51,6 +58,9 @@ export default function VadAudio({
   const handleStartListening = useCallback(() => {
     vad.start();
     startTimer();
+    if (isSupported) {
+      request();
+    }
     onStartListening();
     setIsListening(true);
     audioChunks.current = [];
@@ -62,6 +72,9 @@ export default function VadAudio({
     vad.pause();
     resetDuration();
     clearTimer();
+    if (isSupported) {
+      release();
+    }
   }, [vad]);
 
   const startTimer = () => {

diff --git a/src/components/chat.tsx b/src/components/chat.tsx
@@ -15,7 +15,6 @@ import { useDropzone } from "react-dropzone";
 import { X } from "lucide-react";
 import { useImageState } from "@/store/tlDrawImage";
 import { useQueryState } from "next-usequerystate";
-import { nanoid } from "ai";
 
 interface ChatProps {
   orgId: string;
@@ -49,10 +48,7 @@ export default function Chat(props: ChatProps) {
   const [imageUrl, setImageUrl] = useState<string>("");
   const [imageName, setImageName] = useState<string>("");
   const queryClient = useQueryClient();
-  const [isNewChat, setIsNewChat] = useQueryState("new");
-  const [isFromClipboard, setIsFromClipboard] = useQueryState("clipboard");
   const [incomingModel] = useQueryState("model");
-  const [incomingInput] = useQueryState("input");
   const [chattype, setChattype] = useState<ChatType>(
     props?.type || incomingModel || "chat",
   );
@@ -164,25 +160,6 @@ export default function Chat(props: ChatProps) {
     },
     sendExtraMessageFields: true,
   });
-  console.log("messages", messages);
-
-  useEffect(() => {
-    if (isNewChat === "true" && incomingInput) {
-      //TODO: use types for useQueryState
-      if (incomingInput && chattype !== "tldraw") {
-        const newMessage = {
-          id: nanoid(),
-          role: "user",
-          content: incomingInput,
-          name: `${props.username},${props.uid}`,
-          audio: "",
-        } as Message;
-        append(newMessage);
-      }
-      setIsFromClipboard("false");
-      setIsNewChat("false");
-    }
-  }, [isFromClipboard, isNewChat]);
 
   useEffect(() => {
     let mainArray: Message[][] = [];
@@ -323,6 +300,9 @@ export default function Chat(props: ChatProps) {
             </div>
           )}
           <InputBar
+            onDrop={onDrop}
+            getInputProps={getInputProps}
+            getRootProps={getRootProps}
             onClickOpenChatSheet={props.onClickOpenChatSheet}
             onClickOpen={open}
             dropZoneImage={image}

diff --git a/src/components/chatcard.tsx b/src/components/chatcard.tsx
@@ -53,7 +53,6 @@ const Chatcard = ({
     const chatlog = JSON.parse(chat.messages as string) as ChatLog;
     console.log("chatlog", chatlog.log);
     const msgs = chatlog.log as ChatEntry[];
-    console.log("messages", msgs);
     const chats = msgs.slice(0, 2);
     const res = await fetch(`/api/generateTitle/${chat.id}/${org_id}`, {
       method: "POST",