hotfix

ohcnetwork · Jan 23, 2024 · 09c7594 · 09c7594
1 parent a9970f8
commit 09c7594
Show file tree

Hide file tree

Showing 9 changed files with 4,408 additions and 6,423 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -0,0 +1 @@
+declare module 'audio-recorder-polyfill';
diff --git a/next.config.js b/next.config.js
@@ -1,7 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'standalone',
-  distDir: 'build'
+  distDir: 'build',
+  reactStrictMode: false,
 };
 
 module.exports = nextConfig;

diff --git a/src/app/(main)/project/[project_id]/chat/[chat_id]/page.tsx b/src/app/(main)/project/[project_id]/chat/[chat_id]/page.tsx
@@ -17,7 +17,8 @@ export default function Chat(params: {
 }) {
   const { project_id, chat_id } = params.params;
   const searchParams = useSearchParams();
-  const shouldAutoPlay = searchParams?.get("autoplay") !== null;
+  const autoplayParam = searchParams?.get("autoplay") !== null;
+  const [shouldAutoPlay, setShouldAutoPlay] = useState<boolean>(false);
   const [newChat, setNewChat] = useState("");
   const [chatMessage, setChatMessage] = useState<string>("");
   const [storage] = useAtom(storageAtom);
@@ -42,21 +43,24 @@ export default function Chat(params: {
 
   const chat: Chat | undefined = chatQuery.data;
   const [projectData, setProjectData] = useState<Project>();
+  const [autoPlayIndex, setAutoPlayIndex] = useState<number>(-1);
 
   const openai_key =
     !storage?.user?.allow_key || storage?.override_api_key
       ? storage?.openai_api_key
       : undefined;
 
   useEffect(() => {
+    if (!chat?.chats) return;
     const uri = window.location.toString();
     if (uri.indexOf("?") > 0)
-      window.history.replaceState(
-        {},
-        document.title,
-        uri.substring(0, uri.indexOf("?")),
-      );
-  }, []);
+      setShouldAutoPlay(true);
+    window.history.replaceState(
+      {},
+      document.title,
+      uri.substring(0, uri.indexOf("?")),
+    );
+  }, [chat, autoplayParam]);
 
   useEffect(() => {
     const prevTitle = document.title;
@@ -101,6 +105,7 @@ export default function Chat(params: {
     {
       retry: false,
       onSuccess: async (data, vars) => {
+        setAutoPlayIndex((chat?.chats?.length || 0) + 1);
         if (!project?.assistant_id) await chatQuery.refetch();
       },
       onError: async (error, vars) => {
@@ -111,8 +116,8 @@ export default function Chat(params: {
   );
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    setIsTyping(true);
     e.preventDefault();
+    setIsTyping(true);
     const fd = await getFormData(storage, undefined, newChat);
     converseMutation.mutate({ formdata: fd });
   };
@@ -131,6 +136,15 @@ export default function Chat(params: {
     }
   }, [chatMessage]);
 
+  useEffect(() => {
+    setShouldAutoPlay(false);
+  }, [shouldAutoPlay]);
+
+  useEffect(() => {
+    console.log(autoPlayIndex);
+    if (autoPlayIndex !== -1) setTimeout(() => setAutoPlayIndex(-1), 1000);
+  }, [autoPlayIndex]);
+
   return (
     <div className="h-screen flex flex-col flex-1">
       <div className="flex-1 overflow-auto" ref={messagesContainerRef}>
@@ -139,8 +153,8 @@ export default function Chat(params: {
             message={message}
             key={message.external_id}
             autoplay={
-              (!!chatMessage || shouldAutoPlay) &&
-              i === (chat?.chats?.length || 0) - 1
+              (shouldAutoPlay && i === 1) ||
+              i === autoPlayIndex
             }
           />
         ))}

diff --git a/src/components/chatbar.tsx b/src/components/chatbar.tsx
@@ -1,7 +1,6 @@
 import { useState } from "react";
 import { Input } from "./ui/interactive";
 import Loading from "./ui/loading";
-import LangDialog from "./ui/langdialog";
 import { supportedLanguages } from "@/utils/constants";
 import { storageAtom } from "@/store";
 import { useAtom } from "jotai";
@@ -30,9 +29,8 @@ export default function ChatBar(props: {
   return (
     <>
       <div
-        className={`fixed inset-0 flex items-center justify-center transition-all ${
-          status === "recording" ? "visible opacity-100" : "invisible opacity-0"
-        }`}
+        className={`fixed inset-0 flex items-center justify-center transition-all ${status === "recording" ? "visible opacity-100" : "invisible opacity-0"
+          }`}
       >
         <div className="bg-black/40 absolute inset-0 -z-10" />
         <div className="md:min-w-[300px] md:min-h-[300px] bg-white rounded-xl p-4 flex items-center flex-col gap-4">
@@ -122,9 +120,8 @@ export default function ChatBar(props: {
                   <button
                     title="Search by Voice"
                     type="button"
-                    className={`w-12 h-12 p-1 ml-2 text-xl bg-gray-50 text-gray-500 rounded-lg hover:bg-gray-100 transition ${
-                      status === "recording" ? "text-green-500" : ""
-                    }`}
+                    className={`w-12 h-12 p-1 ml-2 text-xl bg-gray-50 text-gray-500 rounded-lg hover:bg-gray-100 transition ${status === "recording" ? "text-green-500" : ""
+                      }`}
                     onClick={
                       status === "recording" ? stopRecording : startRecording
                     }

diff --git a/src/components/chatblock.tsx b/src/components/chatblock.tsx
@@ -98,6 +98,7 @@ export default function ChatBlock(props: {
       const audio = new Audio(message?.audio);
       setAudio(audio);
       setAudioStatus("playing");
+      console.log("playing");
       audio.play();
       audio.addEventListener("ended", () => {
         setAudioStatus("stopped");
@@ -106,6 +107,7 @@ export default function ChatBlock(props: {
   };
 
   const togglePlay = () => {
+    console.log(audioStatus);
     if (audioStatus === "loading") return;
     if (audioStatus === "unloaded") loadAudio();
     if (audioStatus === "playing") {
@@ -133,9 +135,8 @@ export default function ChatBlock(props: {
 
   return (
     <div
-      className={`flex flex-col gap-4 p-4 pt-8 md:p-6 md:pt-8 ${
-        message?.messageType === ChatMessageType.USER ? "bg-gray-500/5" : ""
-      }`}
+      className={`flex flex-col gap-4 p-4 pt-8 md:p-6 md:pt-8 ${message?.messageType === ChatMessageType.USER ? "bg-gray-500/5" : ""
+        }`}
     >
       <div className="flex gap-6 max-w-4xl mx-auto w-full">
         <div>
@@ -187,7 +188,7 @@ export default function ChatBlock(props: {
                 >
                   {audioStatus === "unloaded"
                     ? (message?.message || message?.original_message) +
-                        cursorText || ""
+                    cursorText || ""
                     : `<span className="text-green-600">${highlightText}</span><span>${blackText}</span>`}
                 </ReactMarkdown>
               )}
@@ -206,13 +207,13 @@ export default function ChatBlock(props: {
                     </button>
                     {(audioStatus === "paused" ||
                       audioStatus === "playing") && (
-                      <button
-                        onClick={stopAudio}
-                        className="flex items-center justify-center text-red-500 rounded-lg transition bg-gray-200 hover:text-gray-700 hover:bg-gray-300 p-2 "
-                      >
-                        <i className="fa-regular fa-circle-stop text-xl"></i>
-                      </button>
-                    )}
+                        <button
+                          onClick={stopAudio}
+                          className="flex items-center justify-center text-red-500 rounded-lg transition bg-gray-200 hover:text-gray-700 hover:bg-gray-300 p-2 "
+                        >
+                          <i className="fa-regular fa-circle-stop text-xl"></i>
+                        </button>
+                      )}
                   </div>
                 )}
               {storage?.show_english &&
@@ -303,7 +304,7 @@ const ChatFeedback = ({
       "This is harmful / unsafe.",
     ],
   });
-  const { chat_id } = useParams();
+  const { chat_id }: any = useParams();
 
   const createChatFeedbackMutation = useMutation(
     (feedback: Partial<ChatFeedback>) => API.feedback.create(feedback),

diff --git a/src/components/recorder.ts b/src/components/recorder.ts
@@ -38,7 +38,7 @@ export const useAudioRecorder = (
           const audioUrl = URL.createObjectURL(audioBlob);
           setMediaBlobUrl(audioUrl);
           onStop?.(audioUrl);
-          setStatus("stopped");
+          setStatus("idle");
         });
 
         recorder.start();

diff --git a/src/components/sidebar/chatSidebar.tsx b/src/components/sidebar/chatSidebar.tsx
@@ -72,14 +72,14 @@ export default function ChatSideBar(props: { project_id?: string }) {
     },
     ...(storage?.user?.is_staff
       ? [
-          {
-            icon: "user-shield",
-            text: "Admin",
-            onclick: () => {
-              router.push("/admin");
-            },
+        {
+          icon: "user-shield",
+          text: "Admin",
+          onclick: () => {
+            router.push("/admin");
           },
-        ]
+        },
+      ]
       : []),
     {
       icon: "sign-out-alt",
@@ -149,9 +149,8 @@ export default function ChatSideBar(props: { project_id?: string }) {
               threshold={10}
               loader={
                 <div
-                  className={`${
-                    chatsQuery.isFetching ? "" : "hidden"
-                  } flex justify-center items-center mt-2 h-full`}
+                  className={`${chatsQuery.isFetching ? "" : "hidden"
+                    } flex justify-center items-center mt-2 h-full`}
                 >
                   <div
                     className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
@@ -164,39 +163,34 @@ export default function ChatSideBar(props: { project_id?: string }) {
                 </div>
               }
             >
-              {project_id ? (
-                chatsQuery.data?.pages.map((group, index) => (
-                  <div key={index} className="flex flex-col gap-2">
-                    {group.results.map((chat: Chat) => (
-                      <div
-                        key={chat.external_id}
-                        className="w-full group hover:bg-gray-100 rounded-lg overflow-hidden flex gap-2 justify-between"
+              <div className="flex flex-col gap-2">
+                {project_id && (
+                  chatsQuery.fullData?.map((chat: Chat, j: number) => (
+                    <div
+                      key={j}
+                      className="w-full group hover:bg-gray-100 rounded-lg overflow-hidden flex gap-2 justify-between"
+                    >
+                      <Link
+                        href={`/project/${project_id}/chat/${chat.external_id}`}
+                        className="w-full py-2 px-4 text-left truncate"
+                        title={chat.title}
                       >
-                        <Link
-                          href={`/project/${project_id}/chat/${chat.external_id}`}
-                          className="w-full py-2 px-4 text-left truncate"
-                          title={chat.title}
-                        >
-                          {chat.title}
-                        </Link>
-                        <button
-                          className="py-2 px-2 hidden group-hover:block"
-                          onClick={() =>
-                            setDeleteModal({
-                              open: true,
-                              external_id: chat.external_id,
-                            })
-                          }
-                        >
-                          <i className="fal fa-trash-alt" />
-                        </button>
-                      </div>
-                    ))}
-                  </div>
-                ))
-              ) : (
-                <></>
-              )}
+                        {chat.title}
+                      </Link>
+                      <button
+                        className="py-2 px-2 hidden group-hover:block"
+                        onClick={() =>
+                          setDeleteModal({
+                            open: true,
+                            external_id: chat.external_id,
+                          })
+                        }
+                      >
+                        <i className="fal fa-trash-alt" />
+                      </button>
+                    </div>
+                  )))}
+              </div>
             </InfiniteScroll>
           </div>
         </div>

diff --git a/src/utils/hooks/useInfiQuery.tsx b/src/utils/hooks/useInfiQuery.tsx
@@ -15,5 +15,8 @@ export const useInfiQuery = (
   const loadMore = () => {
     if (query.hasNextPage) query.fetchNextPage();
   };
-  return { ...query, loadMore };
+
+  const fullData = query.data?.pages.flatMap((page) => page.results);
+
+  return { ...query, loadMore, fullData };
 };