diff --git a/src/components/Sidebar/chat/chatInput.tsx b/src/components/Sidebar/chat/ChatInputx.tsx similarity index 75% rename from src/components/Sidebar/chat/chatInput.tsx rename to src/components/Sidebar/chat/ChatInputx.tsx index a378e17c3..5cc9b8aa9 100644 --- a/src/components/Sidebar/chat/chatInput.tsx +++ b/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 (
@@ -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({
- ) + ); } diff --git a/src/components/Sidebar/chat/chatList.tsx b/src/components/Sidebar/chat/ChatListx.tsx similarity index 71% rename from src/components/Sidebar/chat/chatList.tsx rename to src/components/Sidebar/chat/ChatListx.tsx index 6fdae23aa..05fea55b4 100644 --- a/src/components/Sidebar/chat/chatList.tsx +++ b/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(null) + const containerRef = useRef(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 (
{ .filter((msg) => msg.role !== ChatRole.SYSTEM) .map((msg, i) => (
@@ -60,13 +60,13 @@ const ChatList = ({ messages }: ChatListProps) => { table: Table, }} > - {msg.content.replace(/(?<=\n\n)(?![*-])\n/gi, ' \n ')} + {msg.content.replace(/(?<=\n\n)(?![*-])\n/gi, " \n ")}
)) )}
- ) -} + ); +}; -export default ChatList +export default ChatList; diff --git a/src/components/Sidebar/chat/index.tsx b/src/components/Sidebar/chat/index.tsx index a205e15e5..68707f9e7 100644 --- 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;