Add Hover Card and Button Group Components, Refactor Structure, and Improve UI

apps/desktop/.cursor/rules/style.mdc

@@ -9,4 +9,4 @@ alwaysApply: true
 
 ## Tailwind ClassNames
 
-- If there are many classNames and they have conditional logic, use `cn` (import it with `import { cn } from "@hypr/ui/lib/utils"`). It is similar to `clsx`. Always pass an array. Split by logical grouping.
+- If there are many classNames and they have conditional logic, use `cn` (import it with `import { cn } from "@hypr/utils"`). It is similar to `clsx`. Always pass an array. Split by logical grouping.

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

@@ -111,6 +111,7 @@ export function ChatMessageInput({
                   });
                 }
               }}
+              defaultValue="auto"
             >
               <SelectTrigger className="h-8 text-xs border-0 focus:ring-0 focus:ring-offset-0 shadow-none hover:bg-accent">
                 <SelectValue />

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

@@ -38,7 +38,7 @@ export function NormalMessage({ message, handleReload }: { message: HyprUIMessag
           )}
         </MessageBubble>
         {shouldShowTimestamp && message.metadata?.createdAt && (
-          <div className="text-xs text-gray-400 mt-1 px-2">
+          <div className="text-xs text-neutral-400 mt-1 px-2">
             {formatDistanceToNow(message.metadata.createdAt, { addSuffix: true })}
           </div>
         )}
@@ -81,7 +81,7 @@ function Reasoning({ part }: { part: Extract<Part, { type: "reasoning" }> }) {
       title={title}
       disabled={streaming}
     >
-      <div className="text-sm text-gray-500 whitespace-pre-wrap">
+      <div className="text-sm text-neutral-500 whitespace-pre-wrap">
         {part.text}
       </div>
     </Disclosure>

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

@@ -35,9 +35,9 @@ export function MessageBubble({
     <div
       className={cn([
         "rounded-2xl px-3 py-1 text-sm",
-        variant === "user" && "bg-blue-100 text-gray-800",
-        variant === "assistant" && "bg-gray-100 text-gray-800",
-        variant === "loading" && "bg-gray-100 text-gray-800",
+        variant === "user" && "bg-blue-100 text-neutral-800",
+        variant === "assistant" && "bg-neutral-100 text-neutral-800",
+        variant === "loading" && "bg-neutral-100 text-neutral-800",
         variant === "error" && "bg-red-50 text-red-600 border border-red-200",
         withActionButton && "relative group",
       ])}
@@ -68,8 +68,8 @@ export function ActionButton({
         "transition-opacity",
         "p-1 rounded-full",
         variant === "default" && [
-          "bg-gray-200 hover:bg-gray-300",
-          "text-gray-600 hover:text-gray-800",
+          "bg-neutral-200 hover:bg-neutral-300",
+          "text-neutral-600 hover:text-neutral-800",
         ],
         variant === "error" && [
           "bg-red-100 hover:bg-red-200",
@@ -99,13 +99,13 @@ export function Disclosure(
     <details
       className={cn([
         "group px-2 py-1 my-2 border rounded-md transition-colors",
-        "cursor-pointer border-gray-200 hover:border-gray-300",
+        "cursor-pointer border-neutral-200 hover:border-neutral-300",
       ])}
     >
       <summary
         className={cn([
           "w-full",
-          "text-xs text-gray-500",
+          "text-xs text-neutral-500",
           "select-none list-none marker:hidden",
           "flex items-center gap-2",
         ])}
@@ -122,7 +122,7 @@ export function Disclosure(
         </span>
         <ChevronRight className="w-3 h-3 flex-shrink-0 transition-transform group-open:rotate-90" />
       </summary>
-      <div className="mt-1 pt-2 px-1 border-t border-gray-200">
+      <div className="mt-1 pt-2 px-1 border-t border-neutral-200">
         {children}
       </div>
     </details>

apps/desktop/src/components/chat/message/tool/search.tsx

@@ -68,16 +68,16 @@ function RenderContent({ part }: { part: Part }) {
           <CarouselContent className="-ml-2">
             {results.map((result: any, index: number) => (
               <CarouselItem key={result.id || index} className="pl-1 basis-full sm:basis-1/2 lg:basis-1/3">
-                <Card className="h-full bg-gray-50">
+                <Card className="h-full bg-neutral-50">
                   <CardContent className="px-2 py-0.5">
                     <RenderSession sessionId={result.id} />
                   </CardContent>
                 </Card>
               </CarouselItem>
             ))}
           </CarouselContent>
-          <CarouselPrevious className="-left-4 h-6 w-6 bg-gray-100 hover:bg-gray-200" />
-          <CarouselNext className="-right-4 h-6 w-6 bg-gray-100 hover:bg-gray-200" />
+          <CarouselPrevious className="-left-4 h-6 w-6 bg-neutral-100 hover:bg-neutral-200" />
+          <CarouselNext className="-right-4 h-6 w-6 bg-neutral-100 hover:bg-neutral-200" />
         </Carousel>
       </div>
     );