@igstack/app-catalog-frontend-core 0.0.1

package/src/index.css

@@ -0,0 +1,225 @@
+/* @import url(./modules/resourceJump/ui/JumpMainButton.css); */
+@import 'tailwindcss';
+/* Other module imports this css, and we need to tell tailwind to scan our tsx files */
+@source ".";
+
+/* @import 'tw-animate-css'; */
+
+@layer base {
+  :root {
+    --background: oklch(0.9842 0.0034 247.8575);
+    --foreground: oklch(0.2795 0.0368 260.031);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.2795 0.0368 260.031);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.2795 0.0368 260.031);
+    --primary: oklch(0.5854 0.2041 277.1173);
+    --primary-foreground: oklch(1 0 0);
+    --secondary: oklch(0.9276 0.0058 264.5313);
+    --secondary-foreground: oklch(0.3729 0.0306 259.7328);
+    --muted: oklch(0.967 0.0029 264.5419);
+    --muted-foreground: oklch(0.551 0.0234 264.3637);
+    --accent: oklch(0.9299 0.0334 272.7879);
+    --accent-foreground: oklch(0.3729 0.0306 259.7328);
+    --destructive: oklch(0.6368 0.2078 25.3313);
+    --destructive-foreground: oklch(1 0 0);
+    --border: oklch(0.8717 0.0093 258.3382);
+    --input: oklch(0.8717 0.0093 258.3382);
+    --ring: oklch(0.5854 0.2041 277.1173);
+    --chart-1: oklch(0.5854 0.2041 277.1173);
+    --chart-2: oklch(0.5106 0.2301 276.9656);
+    --chart-3: oklch(0.4568 0.2146 277.0229);
+    --chart-4: oklch(0.3984 0.1773 277.3662);
+    --chart-5: oklch(0.3588 0.1354 278.6973);
+    --sidebar: oklch(0.967 0.0029 264.5419);
+    --sidebar-foreground: oklch(0.2795 0.0368 260.031);
+    --sidebar-primary: oklch(0.5854 0.2041 277.1173);
+    --sidebar-primary-foreground: oklch(1 0 0);
+    --sidebar-accent: oklch(0.9299 0.0334 272.7879);
+    --sidebar-accent-foreground: oklch(0.3729 0.0306 259.7328);
+    --sidebar-border: oklch(0.8717 0.0093 258.3382);
+    --sidebar-ring: oklch(0.5854 0.2041 277.1173);
+    --font-sans:
+      ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-serif: Merriweather, serif;
+    --font-mono:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+      'Courier New', monospace;
+    --radius: 0.5rem;
+    --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-sm:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow-md:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
+    --shadow-lg:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
+    --shadow-xl:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 8px 10px -2px hsl(0 0% 0% / 0.1);
+    --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+    --tracking-normal: 0em;
+    --spacing: 0.25rem;
+    --hopper: oklch(0.7488 0.149 130.38);
+    --animation-btn: 0.25s;
+    --btn-focus-scale: 0.95;
+    --eh-app-foreground: var(--foreground);
+    --eh-app-border: #26ff67;
+    --eh-env-foreground: var(--color-chart-1);
+    --eh-env-border: #2684ff;
+    --eh-context-foreground: #ff7926;
+    --eh-context-border: #ff7926;
+  }
+
+  /* https://tweakcn.com/editor/theme */
+  .dark {
+    --background: hsl(212.29deg 18.32% 13.93%);
+    --foreground: oklch(0.9288 0.0126 255.5078);
+    --card: oklch(0.2795 0.0368 260.031);
+    --card-foreground: oklch(0.9288 0.0126 255.5078);
+    --popover: oklch(0.2795 0.0368 260.031);
+    --popover-foreground: oklch(0.9288 0.0126 255.5078);
+    --primary: oklch(0.6801 0.1583 276.9349);
+    --primary-foreground: oklch(0.2077 0.0398 265.7549);
+    --secondary: oklch(0.3351 0.0331 260.912);
+    --secondary-foreground: oklch(0.8717 0.0093 258.3382);
+    --muted: oklch(0.2795 0.0368 260.031);
+    --muted-foreground: oklch(0.7137 0.0192 261.3246);
+    --accent: oklch(0.3729 0.0306 259.7328);
+    --accent-foreground: oklch(0.8717 0.0093 258.3382);
+    --destructive: oklch(0.6368 0.2078 25.3313);
+    --destructive-foreground: oklch(0.2077 0.0398 265.7549);
+    --border: oklch(0.4461 0.0263 256.8018);
+    --input: oklch(0.4461 0.0263 256.8018);
+    --ring: oklch(0.6801 0.1583 276.9349);
+    --chart-1: oklch(0.6801 0.1583 276.9349);
+    --chart-2: oklch(0.5854 0.2041 277.1173);
+    --chart-3: oklch(0.5106 0.2301 276.9656);
+    --chart-4: oklch(0.4568 0.2146 277.0229);
+    --chart-5: oklch(0.3984 0.1773 277.3662);
+    --sidebar: oklch(0.2795 0.0368 260.031);
+    --sidebar-foreground: oklch(0.9288 0.0126 255.5078);
+    --sidebar-primary: oklch(0.6801 0.1583 276.9349);
+    --sidebar-primary-foreground: oklch(0.2077 0.0398 265.7549);
+    --sidebar-accent: oklch(0.3729 0.0306 259.7328);
+    --sidebar-accent-foreground: oklch(0.8717 0.0093 258.3382);
+    --sidebar-border: oklch(0.4461 0.0263 256.8018);
+    --sidebar-ring: oklch(0.6801 0.1583 276.9349);
+    --font-sans:
+      ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-serif: Merriweather, serif;
+    --font-mono:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+      'Courier New', monospace;
+    --radius: 0.5rem;
+    --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-sm:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow-md:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
+    --shadow-lg:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
+    --shadow-xl:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 8px 10px -2px hsl(0 0% 0% / 0.1);
+    --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+
+    --highlight: var(--color-amber-900);
+    --hopper: oklch(0.7488 0.149 130.38);
+    --animation-btn: 0.25s;
+    --btn-focus-scale: 0.95;
+  }
+}
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+
+  --color-highlight: var(--highlight);
+  --color-hopper: var(--hopper);
+  --color-eh-env-foreground: var(--eh-env-foreground);
+  --color-eh-env-border: var(--eh-env-border);
+  --color-eh-app-foreground: var(--eh-app-foreground);
+  --color-eh-app-border: var(--eh-app-border);
+  --color-eh-context-foreground: var(--eh-context-foreground);
+  --color-eh-context-border: var(--eh-context-border);
+
+  --animate-button-pop: button-pop var(--animation-btn, 0.25s) ease-out;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@keyframes button-pop {
+  0% {
+    transform: scale(var(--btn-focus-scale, 0.98));
+  }
+
+  40% {
+    transform: scale(1.02);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

package/src/index.tsx

@@ -0,0 +1,3 @@
+export { appPropsFactory } from './appPropsFactory.js'
+export { App } from './App'
+export type { AppProps } from './App'

package/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import type { ClassValue } from 'clsx'
+
+export function cn(...inputs: Array<ClassValue>) {
+  return twMerge(clsx(inputs))
+}

package/src/main.tsx

@@ -0,0 +1,57 @@
+import { StrictMode } from 'react'
+import ReactDOM from 'react-dom/client'
+// import { registerSW } from 'virtual:pwa-register';
+import { createBrowserHistory } from '@tanstack/react-router'
+import { createTRPCClient, httpBatchLink } from '@trpc/client'
+import { AcDb as DbClass } from './userDb/AcDb'
+import type { TRPCRouter } from '@igstack/app-catalog-backend-core'
+import type { EhPlugin } from './modules/pluginCore/types'
+import { createQueryClient } from '~/api/infra/createQueryClient'
+import { App } from '~/App'
+import { createEhRouter } from '~/util/createEhRouter'
+import './index.css'
+
+// registerSW();
+
+const trpcClient = createTRPCClient<TRPCRouter>({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:4000/trpc',
+    }),
+  ],
+})
+
+const db = new DbClass()
+const queryClient = createQueryClient({ trpcClient, db })
+const plugins: Array<EhPlugin> = [
+  // Future plugins can be added here
+]
+const router = createEhRouter({
+  history: createBrowserHistory(),
+  context: {
+    queryClient,
+    trpcClient,
+    db,
+    plugins,
+    boostrapHealth: {
+      bootstrapApiError: undefined,
+    },
+  },
+})
+
+// Render the app
+
+const rootElement = document.getElementById('root')!
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(
+    <StrictMode>
+      <App
+        router={router}
+        queryClient={queryClient}
+        trpcClient={trpcClient}
+        db={db}
+      />
+    </StrictMode>,
+  )
+}

package/src/modules/admin-base/components/AdminChat.tsx

@@ -0,0 +1,122 @@
+import { useChat } from '@ai-sdk/react'
+import { DefaultChatTransport } from 'ai'
+import { Send } from 'lucide-react'
+import type { FormEvent } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import { Button } from '~/ui/button'
+import { Input } from '~/ui/input'
+
+import { useAdminConfig } from '../context/AdminConfigContext'
+import { AdminWelcome } from './AdminWelcome'
+
+export function AdminChat() {
+  const config = useAdminConfig()
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const [input, setInput] = useState('')
+
+  // Use DefaultChatTransport which handles UI message stream format (tool calls, etc.)
+  const transport = useMemo(
+    () => new DefaultChatTransport({ api: config.chatApiUrl }),
+    [config.chatApiUrl],
+  )
+
+  const { messages, sendMessage, status, error } = useChat({
+    transport,
+  })
+
+  const isLoading = status === 'streaming' || status === 'submitted'
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages])
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault()
+    if (!input.trim() || isLoading) {
+      return
+    }
+    sendMessage({ text: input })
+    setInput('')
+  }
+
+  // Extract text content from message parts
+  const getMessageContent = (message: (typeof messages)[0]): string => {
+    return message.parts
+      .filter((part) => part.type === 'text')
+      .map((part) => part.text)
+      .join('')
+  }
+
+  return (
+    <div className="flex flex-col flex-1">
+      {/* Messages area */}
+      <div className="flex-1 overflow-y-auto">
+        {messages.length === 0 ? (
+          <AdminWelcome />
+        ) : (
+          <div className="max-w-3xl mx-auto space-y-4 py-4">
+            {messages.map((message) => (
+              <div
+                key={message.id}
+                className={`flex ${
+                  message.role === 'user' ? 'justify-end' : 'justify-start'
+                }`}
+              >
+                <div
+                  className={`max-w-[80%] rounded-lg px-4 py-2 ${
+                    message.role === 'user'
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted text-foreground'
+                  }`}
+                >
+                  <pre className="whitespace-pre-wrap font-sans text-sm">
+                    {getMessageContent(message)}
+                  </pre>
+                </div>
+              </div>
+            ))}
+            {isLoading && (
+              <div className="flex justify-start">
+                <div className="bg-muted rounded-lg px-4 py-2">
+                  <span className="text-muted-foreground text-sm">
+                    Thinking...
+                  </span>
+                </div>
+              </div>
+            )}
+            <div ref={messagesEndRef} />
+          </div>
+        )}
+      </div>
+
+      {/* Error display */}
+      {error && (
+        <div className="px-4 py-2 bg-destructive/10 border-t border-destructive/20">
+          <p className="text-destructive text-sm">Error: {error.message}</p>
+        </div>
+      )}
+
+      {/* Input area */}
+      <div className="border-t border-border p-4">
+        <form onSubmit={handleSubmit} className="max-w-3xl mx-auto">
+          <div className="flex gap-2">
+            <Input
+              type="text"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder="Type your message..."
+              disabled={isLoading}
+              className="flex-1"
+            />
+            <Button type="submit" disabled={isLoading || !input.trim()}>
+              <Send className="h-4 w-4" />
+              <span className="sr-only">Send</span>
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

package/src/modules/admin-base/components/AdminLayout.tsx

@@ -0,0 +1,111 @@
+import { Link } from '@tanstack/react-router'
+import {
+  CheckSquare,
+  ChevronLeft,
+  ChevronRight,
+  ImageIcon,
+  LayoutDashboard,
+  MessageSquare,
+} from 'lucide-react'
+import type { ReactNode } from 'react'
+import { useState } from 'react'
+import { cn } from '~/lib/utils'
+import { Button } from '~/ui/button'
+import { Breadcrumbs } from '~/ui/components/Breadcrumbs'
+import { MainLayout } from '~/ui/layout/MainLayout'
+
+export interface AdminLayoutProps {
+  children: ReactNode
+}
+
+interface NavItem {
+  name: string
+  path: string
+  icon: typeof MessageSquare
+}
+
+const navItems: Array<NavItem> = [
+  {
+    name: 'Chat',
+    path: '/admin/chat',
+    icon: MessageSquare,
+  },
+  {
+    name: 'Icons',
+    path: '/admin/icons',
+    icon: ImageIcon,
+  },
+  {
+    name: 'App For Catalog',
+    path: '/admin/app-for-catalog',
+    icon: LayoutDashboard,
+  },
+  {
+    name: 'Approval Methods',
+    path: '/admin/approval-methods',
+    icon: CheckSquare,
+  },
+]
+
+export function AdminLayout({ children }: AdminLayoutProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+
+  return (
+    <MainLayout breadcrumbs={<Breadcrumbs />}>
+      <div className="flex gap-6 -mx-6 -my-6 flex-1">
+        {/* Left sidebar */}
+        <aside
+          className={cn(
+            'flex flex-col transition-all duration-300',
+            isCollapsed ? 'w-16' : 'w-64',
+          )}
+        >
+          <div className="p-4 flex items-center justify-between">
+            {!isCollapsed && <h1 className="text-2xl font-bold">Admin</h1>}
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setIsCollapsed(!isCollapsed)}
+              className={cn('h-8 w-8', isCollapsed && 'mx-auto')}
+            >
+              {isCollapsed ? (
+                <ChevronRight className="h-4 w-4" />
+              ) : (
+                <ChevronLeft className="h-4 w-4" />
+              )}
+            </Button>
+          </div>
+          <nav className="flex-1 p-4 space-y-2">
+            {navItems.map((item) => {
+              const Icon = item.icon
+              return (
+                <Link key={item.path} to={item.path} className="block">
+                  {({ isActive }: { isActive: boolean }) => (
+                    <Button
+                      variant="ghost"
+                      className={cn(
+                        'w-full',
+                        isCollapsed ? 'justify-center px-2' : 'justify-start',
+                        isActive &&
+                          'bg-primary text-primary-foreground hover:bg-primary/90',
+                      )}
+                      title={isCollapsed ? item.name : undefined}
+                    >
+                      <Icon className={cn('w-4 h-4', !isCollapsed && 'mr-2')} />
+                      {!isCollapsed && <span>{item.name}</span>}
+                    </Button>
+                  )}
+                </Link>
+              )
+            })}
+          </nav>
+        </aside>
+
+        {/* Main content */}
+        <main className="flex-1 flex flex-col overflow-hidden min-w-0">
+          {children}
+        </main>
+      </div>
+    </MainLayout>
+  )
+}

package/src/modules/admin-base/components/AdminWelcome.tsx

@@ -0,0 +1,52 @@
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '~/ui/card'
+
+export function AdminWelcome() {
+  return (
+    <div className="p-6 max-w-2xl mx-auto">
+      <h1 className="text-2xl font-bold mb-4">Admin Assistant</h1>
+      <p className="text-muted-foreground mb-6">
+        Welcome to the AI-powered admin interface. You can use natural language
+        to manage your application.
+      </p>
+
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>What you can do</CardTitle>
+          <CardDescription>
+            Try these example commands to get started
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ul className="space-y-2 text-sm">
+            <li className="flex items-start gap-2">
+              <span className="text-primary">•</span>
+              <span>Show me contents of the Apps table in DB</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-primary">•</span>
+              <span>Add a new app called "Portal" with icon "portal"</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-primary">•</span>
+              <span>List all configured data sources</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-primary">•</span>
+              <span>Configure a new MCP server</span>
+            </li>
+          </ul>
+        </CardContent>
+      </Card>
+
+      <p className="text-sm text-muted-foreground">
+        Type your request in the chat below to get started.
+      </p>
+    </div>
+  )
+}

package/src/modules/admin-base/context/AdminConfigContext.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react'
+import { createContext, use, useMemo } from 'react'
+
+import type { AdminConfig } from '../types/adminTypes'
+
+const defaultConfig: AdminConfig = {
+  chatApiUrl: '/api/admin/chat',
+}
+
+const AdminConfigContext = createContext<AdminConfig>(defaultConfig)
+
+export interface AdminConfigProviderProps {
+  config?: Partial<AdminConfig>
+  children: ReactNode
+}
+
+export function AdminConfigProvider({
+  config,
+  children,
+}: AdminConfigProviderProps) {
+  const mergedConfig: AdminConfig = useMemo(
+    () => ({
+      ...defaultConfig,
+      ...config,
+    }),
+    [config],
+  )
+
+  return (
+    <AdminConfigContext value={mergedConfig}>{children}</AdminConfigContext>
+  )
+}
+
+export function useAdminConfig(): AdminConfig {
+  return use(AdminConfigContext)
+}

package/src/modules/admin-base/index.ts

@@ -0,0 +1,16 @@
+// Components
+export { AdminChat } from './components/AdminChat'
+export { AdminLayout } from './components/AdminLayout'
+export { AdminWelcome } from './components/AdminWelcome'
+
+// Context
+export {
+    AdminConfigProvider,
+    useAdminConfig,
+    type AdminConfigProviderProps
+} from './context/AdminConfigContext'
+
+// Types
+export type { AdminChatMessage, AdminConfig } from './types/adminTypes'
+
+

package/src/modules/admin-base/types/adminTypes.ts

@@ -0,0 +1,11 @@
+export interface AdminConfig {
+  /** API endpoint for chat - defaults to /api/admin/chat */
+  chatApiUrl?: string
+}
+
+export interface AdminChatMessage {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+  createdAt?: Date
+}