Improve chat navigation, model selection, and streaming

components/ai-elements/prompt-input.tsx

@@ -37,14 +37,14 @@ import {
 import { cn } from "@/lib/utils";
 import type { ChatStatus, FileUIPart } from "ai";
 import {
-  CornerDownLeftIcon,
-  ImageIcon,
-  MicIcon,
-  PaperclipIcon,
-  PlusIcon,
-  SquareIcon,
-  XIcon,
-} from "lucide-react";
+  RiCornerDownLeftLine,
+  RiImageLine,
+  RiMicLine,
+  RiAttachment2,
+  RiAddLine,
+  RiStopFill,
+  RiCloseLine,
+} from "@remixicon/react";
 import { Loader } from "@/components/ai-elements/loader";
 import { nanoid } from "nanoid";
 import {
@@ -319,7 +319,7 @@ export function PromptInputAttachment({
                 />
               ) : (
                 <div className="flex size-5 items-center justify-center text-muted-foreground">
-                  <PaperclipIcon className="size-3" />
+                  <RiAttachment2 className="size-3" />
                 </div>
               )}
             </div>
@@ -333,7 +333,7 @@ export function PromptInputAttachment({
               type="button"
               variant="ghost"
             >
-              <XIcon />
+              <RiCloseLine />
               <span className="sr-only">Remove</span>
             </Button>
           </div>
@@ -421,7 +421,7 @@ export const PromptInputActionAddAttachments = ({
         attachments.openFileDialog();
       }}
     >
-      <ImageIcon className="mr-2 size-4" /> {label}
+      <RiImageLine className="mr-2 size-4" /> {label}
     </DropdownMenuItem>
   );
 };
@@ -989,7 +989,7 @@ export const PromptInputActionMenuTrigger = ({
 }: PromptInputActionMenuTriggerProps) => (
   <DropdownMenuTrigger asChild>
     <PromptInputButton className={className} {...props}>
-      {children ?? <PlusIcon className="size-4" />}
+      {children ?? <RiAddLine className="size-4" />}
     </PromptInputButton>
   </DropdownMenuTrigger>
 );
@@ -1029,14 +1029,14 @@ export const PromptInputSubmit = ({
   children,
   ...props
 }: PromptInputSubmitProps) => {
-  let Icon = <CornerDownLeftIcon className="size-4" />;
+  let Icon = <RiCornerDownLeftLine className="size-4" />;
 
   if (status === "submitted") {
     Icon = <Loader size={16} />;
   } else if (status === "streaming") {
-    Icon = <SquareIcon className="size-4" />;
+    Icon = <RiStopFill className="size-4" />;
   } else if (status === "error") {
-    Icon = <XIcon className="size-4" />;
+    Icon = <RiCloseLine className="size-4" />;
   }
 
   return (
@@ -1208,7 +1208,7 @@ export const PromptInputSpeechButton = ({
       onClick={toggleListening}
       {...props}
     >
-      <MicIcon className="size-4" />
+      <RiMicLine className="size-4" />
     </PromptInputButton>
   );
 };