ui chores

Author: yujonglee

apps/desktop/src/components/chat/input.tsx

@@ -3,7 +3,7 @@ import { Button } from "@hypr/ui/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@hypr/ui/components/ui/select";
 import { cn } from "@hypr/utils";
 
-import { MicIcon, PaperclipIcon, SendIcon } from "lucide-react";
+import { PaperclipIcon, SendIcon } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 import { useShell } from "../../contexts/shell";
@@ -67,20 +67,24 @@ export function ChatMessageInput({
     }
   }, [handleSubmit]);
 
+  useEffect(() => {
+    editorRef.current?.editor?.commands.focus();
+  }, []);
+
   return (
     <div
       className={cn([chat.mode !== "RightPanelOpen" && "p-1"])}
     >
       <div
         className={cn([
           "flex flex-col border border-neutral-200 rounded-xl",
-          "focus-within:ring-1 focus-within:ring-blue-500 focus-within:border-blue-500",
           chat.mode === "RightPanelOpen" && "rounded-t-none border-t-0",
         ])}
       >
-        <div className="flex-1 px-2 pt-2">
+        <div className="flex-1 p-2">
           <Editor
             ref={editorRef}
+            placeholderComponent={() => <p className="text-sm text-neutral-400">Ask me anything...</p>}
             handleChange={() => {}}
             initialContent=""
             editable={!disabled}
@@ -126,14 +130,6 @@ export function ChatMessageInput({
           </div>
 
           <div className="flex items-center gap-1">
-            <Button
-              size="icon"
-              variant="ghost"
-              className="text-neutral-400"
-            >
-              <MicIcon size={16} />
-            </Button>
-
             <Button
               onClick={handleSubmit}
               disabled={disabled}

apps/desktop/src/components/chat/message/normal.tsx

@@ -89,8 +89,26 @@ function Reasoning({ part }: { part: Extract<Part, { type: "reasoning" }> }) {
 }
 
 function Text({ part }: { part: Extract<Part, { type: "text" }> }) {
+  const components = {
+    h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => {
+      return <h2 className="text-lg font-bold pt-2">{props.children as React.ReactNode}</h2>;
+    },
+    ul: (props: React.HTMLAttributes<HTMLUListElement>) => {
+      return <ul className="list-disc list-inside flex flex-col gap-1.5">{props.children as React.ReactNode}</ul>;
+    },
+    ol: (props: React.HTMLAttributes<HTMLOListElement>) => {
+      return <ol className="list-decimal list-inside flex flex-col gap-1.5">{props.children as React.ReactNode}</ol>;
+    },
+    li: (props: React.HTMLAttributes<HTMLLIElement>) => {
+      return <li className="list-item">{props.children as React.ReactNode}</li>;
+    },
+  } as const;
+
   return (
-    <Streamdown className="prose prose-sm dark:prose-invert max-w-none">
+    <Streamdown
+      components={components}
+      className="px-0.5 py-1"
+    >
       {part.text}
     </Streamdown>
   );

apps/desktop/src/components/chat/session.tsx

@@ -80,6 +80,7 @@ export function ChatSession({
   }, [initialMessages]);
 
   const persistedAssistantIds = useRef(new Set(initialAssistantMessages.map((message) => message.id)));
+  const prevMessagesRef = useRef<HyprUIMessage[]>(initialMessages);
 
   useEffect(() => {
     persistedAssistantIds.current = new Set(initialAssistantMessages.map((message) => message.id));
@@ -93,6 +94,28 @@ export function ChatSession({
     onError: console.error,
   });
 
+  useEffect(() => {
+    if (!chatGroupId || !store) {
+      prevMessagesRef.current = messages;
+      return;
+    }
+
+    const currentMessageIds = new Set(messages.map((m) => m.id));
+
+    for (const prevMessage of prevMessagesRef.current) {
+      if (
+        prevMessage.role === "assistant"
+        && persistedAssistantIds.current.has(prevMessage.id)
+        && !currentMessageIds.has(prevMessage.id)
+      ) {
+        store.delRow("chat_messages", prevMessage.id);
+        persistedAssistantIds.current.delete(prevMessage.id);
+      }
+    }
+
+    prevMessagesRef.current = messages;
+  }, [chatGroupId, messages, store]);
+
   useEffect(() => {
     if (!chatGroupId || status !== "ready") {
       return;