fix: backgroud-image & stop chat (#21)

src/components/ChatAI/Chat.tsx

@@ -30,7 +30,7 @@ const ChatAI = forwardRef<ChatAIRef, ChatAIProps>(
       init: init,
     }));
 
-    const { curChatEnd, setCurChatEnd } = useChatStore();
+    const { curChatEnd, setCurChatEnd, stopChat } = useChatStore();
 
     const [activeChat, setActiveChat] = useState<Chat>();
     const [isTyping, setIsTyping] = useState(false);
@@ -69,7 +69,7 @@ const ChatAI = forwardRef<ChatAIRef, ChatAIProps>(
 
     // websocket
     useEffect(() => {
-      if (messages.length === 0 || !activeChat?._id) return;
+      if (messages.length === 0 || !activeChat?._id || stopChat) return;
 
       const simulateAssistantResponse = () => {
         console.log("messages", messages);
@@ -94,7 +94,7 @@ const ChatAI = forwardRef<ChatAIRef, ChatAIProps>(
       if (curChatEnd) {
         simulateAssistantResponse();
       }
-    }, [messages, curChatEnd]);
+    }, [messages, curChatEnd, stopChat]);
 
     const scrollToBottom = () => {
       messagesEndRef.current?.scrollIntoView({

src/components/ChatAI/Sidebar.tsx

@@ -40,7 +40,7 @@ export function Sidebar({
           New Chat
         </button>
       </div>
-      <div className="flex-1 overflow-y-auto px-3 pb-3 space-y-1">
+      <div className="flex-1 overflow-y-auto px-3 pb-3 space-y-1 custom-scrollbar">
         {chats.map((chat) => (
           <div
             key={chat._id}

src/components/SearchChat/InputBox.tsx

@@ -33,10 +33,11 @@ export default function ChatInput({
 }: ChatInputProps) {
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const { curChatEnd, setCurChatEnd } = useChatStore();
+  const { stopChat, setStopChat } = useChatStore();
 
   const handleSubmit = () => {
     if (inputValue.trim() && !disabled) {
+      setStopChat(false);
       onSend(inputValue.trim());
     }
   };
@@ -89,7 +90,7 @@ export default function ChatInput({
               <Mic className="w-4 h-4 text-[#999] dark:text-[#999]" />
             </button>
           ) : null}
-          {isChatMode && curChatEnd ? (
+          {isChatMode && stopChat ? (
             <button
               className={`ml-1 p-1 ${
                 inputValue ? "bg-[#0072FF]" : "bg-[#E4E5F0]"
@@ -100,11 +101,11 @@ export default function ChatInput({
               <Send className="w-4 h-4 text-white hover:text-[#999]" />
             </button>
           ) : null}
-          {isChatMode && !curChatEnd ? (
+          {isChatMode && !stopChat ? (
             <button
               className={`ml-1 p-1 bg-[#0072FF] rounded-full transition-colors`}
               type="submit"
-              onClick={() => setCurChatEnd(true)}
+              onClick={() => setStopChat(true)}
             >
               <CircleStop className="w-4 h-4 text-white hover:text-[#999]" />
             </button>
@@ -146,6 +147,7 @@ export default function ChatInput({
           <ChatSwitch
             isChatMode={isChatMode}
             onChange={(value) => {
+              setStopChat(!value);
               changeMode(value);
             }}
           />

src/components/SearchChat/index.tsx

@@ -88,7 +88,7 @@ export default function SearchChat() {
         />
       </div>
 
-      {isChatMode ? null : (
+      {isChatMode || !input ? null : (
         <Search
           key="Search"
           input={input}

src/stores/chatStore.ts

@@ -7,6 +7,8 @@ import {
 export type IChatStore = {
   curChatEnd: boolean;
   setCurChatEnd: (value: boolean) => void;
+  stopChat: boolean;
+  setStopChat: (value: boolean) => void;
 };
 
 export const useChatStore = create<IChatStore>()(
@@ -14,6 +16,8 @@ export const useChatStore = create<IChatStore>()(
     (set) => ({
       curChatEnd: true,
       setCurChatEnd: (value: boolean) => set(() => ({ curChatEnd: value })),
+      stopChat: false,
+      setStopChat: (value: boolean) => set(() => ({ stopChat: value })),
     }),
     {
       name: "chat-state",

tailwind.config.js

@@ -11,12 +11,12 @@ export default {
         separator: "rgb(var(--color-separator) / <alpha-value>)",
       },
       backgroundImage: {
-        chat_bg_light: "url('/chat_bg_light.png')",
-        chat_bg_dark: "url('/chat_bg_dark.png')",
-        search_bg_light: "url('/search_bg_light.png')",
-        search_bg_dark: "url('/search_bg_dark.png')",
-        inputbox_bg_light: "url('/inputbox_bg_light.png')",
-        inputbox_bg_dark: "url('/inputbox_bg_dark.png')",
+        chat_bg_light: "url('/public/chat_bg_light.png')",
+        chat_bg_dark: "url('/public/chat_bg_dark.png')",
+        search_bg_light: "url('/public/search_bg_light.png')",
+        search_bg_dark: "url('/public/search_bg_dark.png')",
+        inputbox_bg_light: "url('/public/inputbox_bg_light.png')",
+        inputbox_bg_dark: "url('/public/inputbox_bg_dark.png')",
       },
       textColor: {
         primary: "rgb(var(--color-foreground) / <alpha-value>)",
@@ -31,7 +31,8 @@ export default {
         },
       },
       boxShadow: {
-        'window-custom': '0 1px 5px 0 rgba(0, 0, 0, 0.15), 0 1px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.1)',
+        "window-custom":
+          "0 1px 5px 0 rgba(0, 0, 0, 0.15), 0 1px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.1)",
       },
     },
   },