Start on new sidebar (#456)

Co-authored-by: shadcn <m@shadcn.com>

components/custom/chat.tsx

@@ -1,28 +1,32 @@
-"use client";
+'use client';
 
-import { Attachment, Message } from "ai";
-import { useChat } from "ai/react";
-import { useState } from "react";
+import { Attachment, Message } from 'ai';
+import { useChat } from 'ai/react';
+import { useState } from 'react';
 
-import { Message as PreviewMessage } from "@/components/custom/message";
-import { useScrollToBottom } from "@/components/custom/use-scroll-to-bottom";
+import { ChatHeader } from '@/components/custom/chat-header';
+import { Message as PreviewMessage } from '@/components/custom/message';
+import { useScrollToBottom } from '@/components/custom/use-scroll-to-bottom';
+import { Model } from '@/lib/model';
 
-import { MultimodalInput } from "./multimodal-input";
-import { Overview } from "./overview";
+import { MultimodalInput } from './multimodal-input';
+import { Overview } from './overview';
 
 export function Chat({
   id,
   initialMessages,
+  selectedModelName,
 }: {
   id: string;
   initialMessages: Array<Message>;
+  selectedModelName: Model['name'];
 }) {
   const { messages, handleSubmit, input, setInput, append, isLoading, stop } =
     useChat({
-      body: { id },
+      body: { id, model: selectedModelName },
       initialMessages,
       onFinish: () => {
-        window.history.replaceState({}, "", `/chat/${id}`);
+        window.history.replaceState({}, '', `/chat/${id}`);
       },
     });
 
@@ -32,44 +36,42 @@ export function Chat({
   const [attachments, setAttachments] = useState<Array<Attachment>>([]);
 
   return (
-    <div className="flex flex-row justify-center pb-4 md:pb-8 h-dvh bg-background">
-      <div className="flex flex-col justify-between items-center gap-4">
+    <div className="flex flex-col min-w-0 h-dvh bg-background">
+      <ChatHeader selectedModelName={selectedModelName} />
+      <div
+        ref={messagesContainerRef}
+        className="flex flex-col min-w-0 gap-6 flex-1 overflow-y-scroll"
+      >
+        {messages.length === 0 && <Overview />}
+
+        {messages.map((message) => (
+          <PreviewMessage
+            key={message.id}
+            role={message.role}
+            content={message.content}
+            attachments={message.experimental_attachments}
+            toolInvocations={message.toolInvocations}
+          />
+        ))}
+
         <div
-          ref={messagesContainerRef}
-          className="flex flex-col gap-4 h-full w-dvw items-center overflow-y-scroll"
-        >
-          {messages.length === 0 && <Overview />}
-
-          {messages.map((message) => (
-            <PreviewMessage
-              key={message.id}
-              role={message.role}
-              content={message.content}
-              attachments={message.experimental_attachments}
-              toolInvocations={message.toolInvocations}
-            />
-          ))}
-
-          <div
-            ref={messagesEndRef}
-            className="shrink-0 min-w-[24px] min-h-[24px]"
-          />
-        </div>
-
-        <form className="flex flex-row gap-2 relative items-end w-full md:max-w-[500px] max-w-[calc(100dvw-32px) px-4 md:px-0">
-          <MultimodalInput
-            input={input}
-            setInput={setInput}
-            handleSubmit={handleSubmit}
-            isLoading={isLoading}
-            stop={stop}
-            attachments={attachments}
-            setAttachments={setAttachments}
-            messages={messages}
-            append={append}
-          />
-        </form>
+          ref={messagesEndRef}
+          className="shrink-0 min-w-[24px] min-h-[24px]"
+        />
       </div>
+      <form className="flex mx-auto px-4 bg-background pb-4 md:pb-6 gap-2 w-full md:max-w-3xl">
+        <MultimodalInput
+          input={input}
+          setInput={setInput}
+          handleSubmit={handleSubmit}
+          isLoading={isLoading}
+          stop={stop}
+          attachments={attachments}
+          setAttachments={setAttachments}
+          messages={messages}
+          append={append}
+        />
+      </form>
     </div>
   );
 }