feat: add basic webui

packages/ai/components/message.tsx

@@ -0,0 +1,22 @@
+import type { Message as MessageType } from 'ai';
+import type { ComponentProps } from 'react';
+import Markdown from 'react-markdown';
+import { twMerge } from 'tailwind-merge';
+
+type MessageProps = {
+  data: MessageType;
+  markdown?: ComponentProps<typeof Markdown>;
+};
+
+export const Message = ({ data, markdown }: MessageProps) => (
+  <div
+    className={twMerge(
+      'flex max-w-[80%] flex-col gap-2 rounded-xl px-4 py-2',
+      data.role === 'user'
+        ? 'self-end bg-foreground text-background'
+        : 'self-start bg-muted'
+    )}
+  >
+    <Markdown {...markdown}>{data.content}</Markdown>
+  </div>
+);

packages/ai/components/thread.tsx

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+type ThreadProps = HTMLAttributes<HTMLDivElement>;
+
+export const Thread = ({ children, className, ...props }: ThreadProps) => (
+  <div
+    className={twMerge(
+      'flex flex-1 flex-col items-start gap-4 overflow-y-auto p-8 pb-0',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);