feat: reorganize files and implement ui and sidebar

app/chat-message.tsx

@@ -1,113 +0,0 @@
-import CodeBlock from '@/components/ui/codeblock'
-import { MemoizedReactMarkdown } from '@/components/markdown'
-import remarkGfm from 'remark-gfm'
-import remarkMath from 'remark-math'
-import { cn } from '@/lib/utils'
-import { fontMessage } from '@/lib/fonts'
-import { Message } from 'ai-connector'
-import { User } from 'lucide-react'
-import { OpenAI } from '@/components/icons'
-
-export interface ChatMessageProps {
-  message: Message
-}
-
-export function ChatMessage({ message, ...props }: ChatMessageProps) {
-  return (
-    <div
-      className={cn(
-        'flex items-start space-x-4 mb-4',
-        fontMessage.className,
-        message.role === 'user' && 'mt-12 first:mt-0'
-      )}
-      {...props}
-    >
-      <div
-        className={cn(
-          'flex h-8 w-8 -ml-2 shrink-0 items-center justify-center rounded-full select-none border',
-          message.role === 'assistant' && 'bg-primary text-primary-foreground'
-        )}
-      >
-        {message.role === 'user' ? (
-          <User className="w-4 h-4" />
-        ) : (
-          <OpenAI className="w-4 h-4" />
-        )}
-      </div>
-      <div
-        className={cn(
-          'border rounded-lg py-2 px-4',
-          message.role === 'assistant' && 'bg-muted/30'
-        )}
-      >
-        <MemoizedReactMarkdown
-          className="prose dark:prose-invert prose-sm prose-pre:rounded-md w-full flex-1 leading-6 prose-p:leading-[1.8rem] prose-pre:bg-[#282c34] max-w-full"
-          remarkPlugins={[remarkGfm, remarkMath]}
-          components={{
-            p({ children }) {
-              return (
-                <p
-                  className={cn(
-                    'mb-2 last:mb-0',
-                    message.role === 'user' && 'font-medium'
-                  )}
-                >
-                  {children}
-                </p>
-              )
-            },
-            code({ node, inline, className, children, ...props }) {
-              if (children.length) {
-                if (children[0] == '▍') {
-                  return (
-                    <span className="mt-1 animate-pulse cursor-default">▍</span>
-                  )
-                }
-
-                children[0] = (children[0] as string).replace('`▍`', '▍')
-              }
-
-              const match = /language-(\w+)/.exec(className || '')
-
-              return !inline ? (
-                <CodeBlock
-                  key={Math.random()}
-                  language={(match && match[1]) || ''}
-                  value={String(children).replace(/\n$/, '')}
-                  {...props}
-                />
-              ) : (
-                <code className={className} {...props}>
-                  {children}
-                </code>
-              )
-            },
-            table({ children }) {
-              return (
-                <table className="border-collapse border border-black px-3 py-1 ">
-                  {children}
-                </table>
-              )
-            },
-            th({ children }) {
-              return (
-                <th className="break-words border border-black bg-gray-500 px-3 py-1 text-white ">
-                  {children}
-                </th>
-              )
-            },
-            td({ children }) {
-              return (
-                <td className="break-words border border-black px-3 py-1">
-                  {children}
-                </td>
-              )
-            }
-          }}
-        >
-          {message.content}
-        </MemoizedReactMarkdown>
-      </div>
-    </div>
-  )
-}