Rename the file src/components/Sidebar/chat/chatInput.tsx to `src/c…

…omponents/Sidebar/chat/ChatInputx.tsx`, rename the file `src/components/Sidebar/chat/chatList.tsx` to `src/components/Sidebar/chat/ChatListx.tsx`, and update the imports and references accordingly
Royal-lobster · Sep 24, 2023 · 2ddc1a1 · 2ddc1a1
1 parent 402064c
commit 2ddc1a1
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 67 deletions.
diff --git a/src/components/Sidebar/chat/chatInput.tsx → src/components/Sidebar/chat/ChatInputx.tsx b/src/components/Sidebar/chat/chatInput.tsx → src/components/Sidebar/chat/ChatInputx.tsx
@@ -1,15 +1,15 @@
-import { useEffect, useState } from 'react'
-import TextareaAutosize from 'react-textarea-autosize'
-import { GiMagicBroom } from 'react-icons/gi'
-import { IoSend } from 'react-icons/io5'
-import { HiHand } from 'react-icons/hi'
+import { useEffect, useState } from "react";
+import TextareaAutosize from "react-textarea-autosize";
+import { GiMagicBroom } from "react-icons/gi";
+import { IoSend } from "react-icons/io5";
+import { HiHand } from "react-icons/hi";
 
 interface SidebarInputProps {
-  loading: boolean
-  submitMessage: (prompt: string) => void
-  clearMessages: () => void
-  chatIsEmpty: boolean
-  cancelRequest: () => void
+  loading: boolean;
+  submitMessage: (prompt: string) => void;
+  clearMessages: () => void;
+  chatIsEmpty: boolean;
+  cancelRequest: () => void;
 }
 
 export function SidebarInput({
@@ -19,22 +19,22 @@ export function SidebarInput({
   chatIsEmpty,
   cancelRequest,
 }: SidebarInputProps) {
-  const [text, setText] = useState('')
-  const [delayedLoading, setDelayedLoading] = useState(false)
+  const [text, setText] = useState("");
+  const [delayedLoading, setDelayedLoading] = useState(false);
 
   useEffect(() => {
     const handleLoadingTimeout = setTimeout(() => {
-      setDelayedLoading(loading)
-    }, 1000)
+      setDelayedLoading(loading);
+    }, 1000);
     return () => {
-      clearTimeout(handleLoadingTimeout)
-    }
-  }, [loading])
+      clearTimeout(handleLoadingTimeout);
+    };
+  }, [loading]);
 
   const handleSubmit = () => {
-    submitMessage(text)
-    setText('')
-  }
+    submitMessage(text);
+    setText("");
+  };
 
   return (
     <div className="cdx-fixed cdx-bottom-0 cdx-left-0 cdx-right-0 cdx-flex cdx-flex-col ">
@@ -58,13 +58,13 @@ export function SidebarInput({
           disabled={loading}
           className="cdx-p-3 cdx-w-full cdx-text-sm cdx-resize-none cdx-max-h-96 cdx-pb-0 cdx-bg-transparent !cdx-border-none focus:!cdx-outline-none"
           onChange={(e) => {
-            e.preventDefault()
-            setText(e.target.value)
+            e.preventDefault();
+            setText(e.target.value);
           }}
           onKeyDown={(e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-              e.preventDefault()
-              handleSubmit()
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              handleSubmit();
             }
           }}
         />
@@ -93,5 +93,5 @@ export function SidebarInput({
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/Sidebar/chat/chatList.tsx → src/components/Sidebar/chat/ChatListx.tsx b/src/components/Sidebar/chat/chatList.tsx → src/components/Sidebar/chat/ChatListx.tsx
@@ -1,26 +1,26 @@
-import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
-import CodeBlock from './markdown-components/CodeBlock'
-import remarkGfm from 'remark-gfm'
-import { useEffect, useRef } from 'react'
-import { Table } from './markdown-components/Table'
-import remarkBreaks from 'remark-breaks'
-import rehypeRaw from 'rehype-raw'
-import { ChatMessage, ChatRole } from '../../../hooks/useCurrentChat'
+import { ReactMarkdown } from "react-markdown/lib/react-markdown";
+import CodeBlock from "./markdown-components/CodeBlock";
+import remarkGfm from "remark-gfm";
+import { useEffect, useRef } from "react";
+import { Table } from "./markdown-components/Table";
+import remarkBreaks from "remark-breaks";
+import rehypeRaw from "rehype-raw";
+import { ChatMessage, ChatRole } from "../../../hooks/useCurrentChat";
 
 interface ChatListProps {
-  messages: ChatMessage[]
+  messages: ChatMessage[];
 }
 
 const ChatList = ({ messages }: ChatListProps) => {
-  const containerRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (containerRef.current) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
-  }, [messages])
+  }, [messages]);
 
-  const filteredMsgs = messages.filter((msg) => msg.role !== ChatRole.SYSTEM)
+  const filteredMsgs = messages.filter((msg) => msg.role !== ChatRole.SYSTEM);
 
   return (
     <div
@@ -48,7 +48,7 @@ const ChatList = ({ messages }: ChatListProps) => {
           .filter((msg) => msg.role !== ChatRole.SYSTEM)
           .map((msg, i) => (
             <div
-              data-user={msg.role === ChatRole.USER ? 'true' : undefined}
+              data-user={msg.role === ChatRole.USER ? "true" : undefined}
               className="markdown cdx-px-4 cdx-py-2 data-[user]:cdx-border-l-2 cdx-border-blue-400 data-[user]:cdx-bg-black/5 data-[user]:dark:cdx-bg-neutral-900/50 cdx-max-w-[400px]"
               key={`${msg.timestamp}-${i}`}
             >
@@ -60,13 +60,13 @@ const ChatList = ({ messages }: ChatListProps) => {
                   table: Table,
                 }}
               >
-                {msg.content.replace(/(?<=\n\n)(?![*-])\n/gi, '&nbsp;\n ')}
+                {msg.content.replace(/(?<=\n\n)(?![*-])\n/gi, "&nbsp;\n ")}
               </ReactMarkdown>
             </div>
           ))
       )}
     </div>
-  )
-}
+  );
+};
 
-export default ChatList
+export default ChatList;
diff --git a/src/components/Sidebar/chat/index.tsx b/src/components/Sidebar/chat/index.tsx
@@ -1,13 +1,13 @@
-import { useEffect } from 'react'
-import ChatList from './chatList'
-import { SidebarInput } from './chatInput'
-import { useChatCompletion } from '../../../hooks/useChatCompletion'
-import { SYSTEM_PROMPT } from '../../../config/prompts'
-import { Settings } from '../../../config/settings'
+import { useEffect } from "react";
+import ChatList from "./ChatListx";
+import { SidebarInput } from "./ChatInputx";
+import { useChatCompletion } from "../../../hooks/useChatCompletion";
+import { SYSTEM_PROMPT } from "../../../config/prompts";
+import { Settings } from "../../../config/settings";
 
 interface ChatProps {
-  settings: Settings
-  chatId: string
+  settings: Settings;
+  chatId: string;
 }
 
 const Chat = ({ settings, chatId }: ChatProps) => {
@@ -17,25 +17,25 @@ const Chat = ({ settings, chatId }: ChatProps) => {
       apiKey: settings.chat.openAIKey!,
       mode: settings.chat.mode,
       systemPrompt: SYSTEM_PROMPT,
-      chatId
-    })
+      chatId,
+    });
 
   useEffect(() => {
     const handleWindowMessage = (event: MessageEvent) => {
       const { action, prompt } = event.data as {
-        action: string
-        prompt: string
+        action: string;
+        prompt: string;
+      };
+      if (action === "generate") {
+        submitQuery(prompt);
       }
-      if (action === 'generate') {
-        submitQuery(prompt)
-      }
-    }
-    window.addEventListener('message', handleWindowMessage)
+    };
+    window.addEventListener("message", handleWindowMessage);
 
     return () => {
-      window.removeEventListener('message', handleWindowMessage)
-    }
-  }, [])
+      window.removeEventListener("message", handleWindowMessage);
+    };
+  }, []);
 
   return (
     <>
@@ -48,7 +48,7 @@ const Chat = ({ settings, chatId }: ChatProps) => {
         cancelRequest={cancelRequest}
       />
     </>
-  )
-}
+  );
+};
 
-export default Chat
+export default Chat;