feat: reorganize files and implement ui and sidebar

components/chat-panel.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { ExternalLink } from '@/components/external-link'
+import { UseChatHelpers } from 'ai-connector'
+import { PromptForm } from './prompt-form'
+
+export interface ChatPanelProps
+  extends Pick<UseChatHelpers, 'append' | 'isLoading' | 'reload' | 'messages'> {
+  id?: string
+}
+
+export function ChatPanel({
+  id,
+  append,
+  isLoading,
+  reload,
+  messages
+}: ChatPanelProps) {
+  return (
+    <div className="fixed bottom-0 left-0 right-0">
+      <div className="max-w-2xl mx-auto">
+        <div className="px-4 py-2 border space-y-4 shadow-lg bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-lg rounded-t-xl">
+          <PromptForm
+            onSubmit={value => {
+              append({
+                content: value,
+                role: 'user'
+              })
+            }}
+            onRefresh={messages.length ? reload : undefined}
+            isLoading={isLoading}
+          />
+          <p className="text-muted-foreground text-xs leading-normal text-center pb-1">
+            This is an open source AI chatbot app built with{' '}
+            <ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and{' '}
+            <ExternalLink href="https://vercel.com/storage/kv">
+              Vercel KV
+            </ExternalLink>
+            .
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}