@aprovan/patchwork-chat 0.1.0-dev.03aaf5b

package/src/index.css

@@ -0,0 +1,190 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Tiptap Markdown Editor Styles */
+.markdown-editor .tiptap {
+  outline: none;
+}
+
+.markdown-editor .tiptap p {
+  margin: 0;
+}
+
+.markdown-editor .tiptap > * + * {
+  margin-top: 0.5em;
+}
+
+/* Placeholder styling */
+.markdown-editor .tiptap p.is-editor-empty:first-child::before {
+  color: hsl(var(--muted-foreground));
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+/* Inline code */
+.markdown-editor .tiptap code {
+  background-color: hsl(var(--muted));
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.25rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875em;
+}
+
+/* Code blocks */
+.markdown-editor .tiptap pre {
+  background-color: hsl(var(--muted));
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875em;
+  overflow-x: auto;
+}
+
+.markdown-editor .tiptap pre code {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+}
+
+/* Blockquotes */
+.markdown-editor .tiptap blockquote {
+  border-left: 4px solid hsl(var(--muted-foreground) / 0.3);
+  padding-left: 1rem;
+  font-style: italic;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Lists */
+.markdown-editor .tiptap ul,
+.markdown-editor .tiptap ol {
+  padding-left: 1.5rem;
+  margin: 0.25em 0;
+}
+
+.markdown-editor .tiptap ul {
+  list-style-type: disc;
+}
+
+.markdown-editor .tiptap ol {
+  list-style-type: decimal;
+}
+
+.markdown-editor .tiptap li {
+  margin: 0.125em 0;
+}
+
+/* Headings - more subtle for chat input */
+.markdown-editor .tiptap h1,
+.markdown-editor .tiptap h2,
+.markdown-editor .tiptap h3 {
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.markdown-editor .tiptap h1 {
+  font-size: 1.25em;
+}
+
+.markdown-editor .tiptap h2 {
+  font-size: 1.125em;
+}
+
+.markdown-editor .tiptap h3 {
+  font-size: 1em;
+}
+
+/* Bold & Italic */
+.markdown-editor .tiptap strong {
+  font-weight: 600;
+}
+
+.markdown-editor .tiptap em {
+  font-style: italic;
+}
+
+/* Strikethrough */
+.markdown-editor .tiptap s {
+  text-decoration: line-through;
+}
+
+/* Code block wrapper with language input */
+.markdown-editor .code-block-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.markdown-editor .code-block-wrapper pre {
+  margin: 0;
+}
+
+.markdown-editor .code-block-wrapper .language-input-wrapper {
+  user-select: none;
+  pointer-events: auto;
+}
+
+.markdown-editor .code-block-wrapper .language-input {
+  background: transparent;
+  user-select: text !important;
+  pointer-events: auto !important;
+  cursor: text;
+  -webkit-user-select: text !important;
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/src/pages/ChatPage.tsx

@@ -0,0 +1,461 @@
+import { useChat } from '@ai-sdk/react';
+import { DefaultChatTransport } from 'ai';
+import { useState, useRef, useEffect, useMemo, useCallback, createContext, useContext } from 'react';
+import {
+  Send,
+  Loader2,
+  Wrench,
+  AlertCircle,
+  Brain,
+  ChevronDown,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import type { UIMessage } from 'ai';
+import { createCompiler, type Compiler } from '@aprovan/patchwork-compiler';
+import {
+  extractCodeBlocks,
+  CodePreview,
+  MarkdownEditor,
+  ServicesInspector,
+  type ServiceInfo,
+} from '@aprovan/patchwork-editor';
+
+const APROVAN_LOGO =
+  'https://raw.githubusercontent.com/AprovanLabs/aprovan.com/main/docs/assets/social-labs.png';
+
+interface PatchworkContext {
+  compiler: Compiler | null;
+  namespaces: string[];
+}
+
+const PatchworkCtx = createContext<PatchworkContext>({ compiler: null, namespaces: [] });
+const useCompiler = () => useContext(PatchworkCtx).compiler;
+const useServices = () => useContext(PatchworkCtx).namespaces;
+
+function TextPart({ text, isUser }: { text: string; isUser: boolean }) {
+  const compiler = useCompiler();
+  const services = useServices();
+
+  if (isUser) {
+    return (
+      <div className="prose prose-sm prose-invert prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-li:my-0 prose-pre:my-2 prose-code:before:content-none prose-code:after:content-none">
+        <Markdown remarkPlugins={[remarkGfm]}>{text}</Markdown>
+      </div>
+    );
+  }
+
+  const parts = extractCodeBlocks(text);
+
+  return (
+    <div className="prose prose-sm dark:prose-invert prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-li:my-0 prose-pre:my-2 prose-code:before:content-none prose-code:after:content-none">
+      {parts.map((part, index) => {
+        if (part.type === 'code') {
+          return (
+            <CodePreview
+              key={index}
+              code={part.content}
+              compiler={compiler}
+              services={services}
+              filePath={part.attributes?.path}
+              entrypoint="main.tsx"
+            />
+          );
+        }
+        return <Markdown key={index} remarkPlugins={[remarkGfm]}>{part.content}</Markdown>;
+      })}
+    </div>
+  );
+}
+
+function ReasoningPart({
+  text,
+  isStreaming,
+}: {
+  text: string;
+  isStreaming?: boolean;
+}) {
+  return (
+    <Collapsible defaultOpen={isStreaming}>
+      <CollapsibleTrigger className="flex items-center gap-2 text-yellow-700 dark:text-yellow-400 hover:opacity-80 w-full">
+        <Brain className="h-4 w-4" />
+        <span className="text-xs font-medium">Thinking</span>
+        {isStreaming && <Loader2 className="h-3 w-3 animate-spin" />}
+        <ChevronDown className="h-3 w-3 ml-auto transition-transform [[data-state=open]>&]:rotate-180" />
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="mt-2 p-3 rounded border-l-4 border-yellow-500 bg-yellow-50 dark:bg-yellow-950/50">
+          <p className="text-sm text-muted-foreground italic whitespace-pre-wrap">
+            {text}
+          </p>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+function ToolPart({
+  toolName,
+  state,
+  input,
+  output,
+  errorText,
+}: {
+  toolName: string;
+  state: string;
+  input: unknown;
+  output?: unknown;
+  errorText?: string;
+}) {
+  const isRunning = state === 'input-streaming' || state === 'input-available';
+  const hasError = state === 'output-error';
+
+  return (
+    <Collapsible className="my-1 w-full">
+      <CollapsibleTrigger className="inline-flex items-center gap-2 px-3 py-1 rounded-full border bg-muted/50 hover:bg-muted text-xs transition-colors">
+        <Wrench className="h-3 w-3 text-muted-foreground" />
+        <span className="font-mono">{toolName}</span>
+        <span className="w-3 h-3 flex items-center justify-center">
+          {isRunning && (
+            <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
+          )}
+          {hasError && <AlertCircle className="h-3 w-3 text-destructive" />}
+        </span>
+        <ChevronDown className="h-3 w-3 text-muted-foreground transition-transform [[data-state=open]>&]:rotate-180" />
+      </CollapsibleTrigger>
+
+      <CollapsibleContent className="mt-2 p-3 rounded-lg border bg-white space-y-2">
+        {input !== undefined && (
+          <div>
+            <span className="text-xs font-medium text-muted-foreground">
+              Input
+            </span>
+            <div className="mt-1 p-2 bg-muted/30 rounded text-xs overflow-auto max-h-48">
+              <pre className="whitespace-pre-wrap break-words m-0">
+                {typeof input === 'string'
+                  ? input
+                  : JSON.stringify(input, null, 2)}
+              </pre>
+            </div>
+          </div>
+        )}
+
+        {output !== undefined && (
+          <div>
+            <span className="text-xs font-medium text-muted-foreground">
+              Output
+            </span>
+            <div className="mt-1 p-2 bg-muted/30 rounded text-xs overflow-auto max-h-48">
+              <pre className="whitespace-pre-wrap break-words m-0">
+                {typeof output === 'string'
+                  ? output
+                  : JSON.stringify(output, null, 2)}
+              </pre>
+            </div>
+          </div>
+        )}
+
+        {errorText && (
+          <div className="text-sm text-destructive flex items-center gap-2">
+            <AlertCircle className="h-4 w-4 shrink-0" />
+            <span className="break-words">{errorText}</span>
+          </div>
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+function MessageBubble({ message }: { message: UIMessage }) {
+  const isUser = message.role === 'user';
+  const isStreaming = message.parts?.some(
+    (p) =>
+      'state' in p &&
+      (p.state === 'input-streaming' || p.state === 'input-available'),
+  );
+
+  return (
+    <div className={`flex gap-3 ${isUser ? 'justify-end' : 'justify-start'}`}>
+      {!isUser && (
+        <Avatar className="h-8 w-8 shrink-0">
+          <img
+            src={APROVAN_LOGO}
+            alt="Assistant"
+            className="rounded-full"
+          />
+          <AvatarFallback className="bg-primary text-primary-foreground">
+            A
+          </AvatarFallback>
+        </Avatar>
+      )}
+
+      <div
+        className={`flex flex-col gap-1 max-w-[80%] min-w-0 ${
+          isUser ? 'items-end' : 'items-start'
+        }`}
+      >
+        <div className="flex items-center gap-2 h-5">
+          <span className="text-xs text-muted-foreground capitalize">
+            {message.role}
+          </span>
+          {isStreaming && (
+            <Badge
+              variant="outline"
+              className="text-xs"
+            >
+              <Loader2 className="h-3 w-3 mr-1 animate-spin" />
+              streaming
+            </Badge>
+          )}
+        </div>
+
+        <div
+          className={`rounded-lg px-4 py-2 overflow-hidden w-full ${
+            isUser ? 'bg-primary text-primary-foreground' : 'bg-muted'
+          }`}
+        >
+          {message.parts?.map((part, i) => {
+            if (part.type === 'text') {
+              return (
+                <TextPart
+                  key={i}
+                  text={part.text}
+                  isUser={isUser}
+                />
+              );
+            }
+
+            if (part.type === 'reasoning') {
+              return (
+                <ReasoningPart
+                  key={i}
+                  text={part.text}
+                  isStreaming={part.state === 'streaming'}
+                />
+              );
+            }
+
+            if (part.type.startsWith('tool-') || part.type === 'dynamic-tool') {
+              const toolPart = part as {
+                type: string;
+                toolName?: string;
+                toolCallId: string;
+                state: string;
+                input?: unknown;
+                output?: unknown;
+                errorText?: string;
+              };
+              const toolName =
+                toolPart.toolName ?? part.type.replace('tool-', '');
+              return (
+                <ToolPart
+                  key={i}
+                  toolName={toolName}
+                  state={toolPart.state}
+                  input={toolPart.input}
+                  output={toolPart.output}
+                  errorText={toolPart.errorText}
+                />
+              );
+            }
+
+            return null;
+          })}
+        </div>
+      </div>
+
+      {isUser && (
+        <Avatar className="h-8 w-8 shrink-0">
+          <AvatarFallback className="bg-secondary">U</AvatarFallback>
+        </Avatar>
+      )}
+    </div>
+  );
+}
+
+const PROXY_URL = '/api/proxy';
+const IMAGE_SPEC = '@aprovan/patchwork-image-shadcn';
+// Local proxy for loading image packages, esm.sh for widget imports
+const IMAGE_CDN_URL = import.meta.env.DEV ? '/_local-packages' : 'https://esm.sh';
+const WIDGET_CDN_URL = 'https://esm.sh'; // Widget imports need esm.sh bundles like @packagedcn
+
+export default function ChatPage() {
+  const [input, setInput] = useState('What\'s the weather in Houston, Texas like?');
+  const [compiler, setCompiler] = useState<Compiler | null>(null);
+  const [namespaces, setNamespaces] = useState<string[]>([]);
+  const [services, setServices] = useState<ServiceInfo[]>([]);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Fetch available services
+    fetch('/api/services')
+      .then((res) => res.json())
+      .then((data) => {
+        setNamespaces(data.namespaces ?? []);
+        // In dev mode, also store full service details for inspection
+        if (import.meta.env.DEV && data.services) {
+          setServices(data.services);
+        }
+      })
+      .catch(() => {
+        setNamespaces([]);
+        setServices([]);
+      });
+
+    // Initialize compiler
+    createCompiler({ 
+      image: IMAGE_SPEC, 
+      proxyUrl: PROXY_URL, 
+      cdnBaseUrl: IMAGE_CDN_URL,
+      widgetCdnBaseUrl: WIDGET_CDN_URL,
+    })
+      .then(setCompiler)
+      .catch(console.error);
+  }, []);
+
+  const patchworkCtx = useMemo(() => ({ compiler, namespaces }), [compiler, namespaces]);
+
+  const transport = useMemo(
+    () =>
+      new DefaultChatTransport({
+        body: () => ({
+          metadata: {
+            patchwork: { compilers: [IMAGE_SPEC] },
+          },
+        }),
+      }),
+    [],
+  );
+
+  const { messages, sendMessage, status, error } = useChat({ transport });
+
+  const isLoading = status === 'submitted' || status === 'streaming';
+
+  const handleSubmit = useCallback((e?: React.FormEvent) => {
+    e?.preventDefault();
+    if (!input.trim()) return;
+    sendMessage({ text: input });
+    setInput('');
+  }, [input, sendMessage]);
+
+  useEffect(() => {
+    scrollRef.current?.scrollTo({
+      top: scrollRef.current.scrollHeight,
+      behavior: 'smooth',
+    });
+  }, [messages]);
+
+  return (
+    <PatchworkCtx.Provider value={patchworkCtx}>
+      <div className="flex flex-col h-screen max-w-4xl mx-auto p-4">
+        <Card className="flex-1 flex flex-col min-h-0 overflow-hidden border">
+          <CardHeader className="border-b py-3">
+            <CardTitle className="flex items-center gap-3">
+              <img
+                src={APROVAN_LOGO}
+                alt="Aprovan"
+                className="h-8 w-8 rounded-full"
+              />
+              <span className="text-lg">patchwork</span>
+              <ServicesInspector namespaces={namespaces} services={services} />
+            </CardTitle>
+          </CardHeader>
+
+          <CardContent className="flex-1 p-0 min-h-0">
+            <ScrollArea
+              className="h-full"
+              ref={scrollRef}
+            >
+              <div className="p-4 space-y-4">
+                {messages.length === 0 ? (
+                  <div className="text-center text-muted-foreground py-12">
+                    <img
+                      src={APROVAN_LOGO}
+                      alt=""
+                      className="h-12 w-12 mx-auto mb-4 opacity-50 rounded-full"
+                    />
+                    <p>Start a conversation</p>
+                  </div>
+                ) : (
+                  messages.map((msg) => (
+                    <MessageBubble
+                      key={msg.id}
+                      message={msg}
+                    />
+                  ))
+                )}
+
+                {isLoading &&
+                  messages[messages.length - 1]?.role !== 'assistant' && (
+                    <div className="flex gap-3 justify-start">
+                      <Avatar className="h-8 w-8 shrink-0">
+                        <img
+                          src={APROVAN_LOGO}
+                          alt=""
+                          className="rounded-full"
+                        />
+                        <AvatarFallback>A</AvatarFallback>
+                      </Avatar>
+                      <div className="flex flex-col gap-1">
+                        <div className="h-5" />
+                        <div className="bg-muted rounded-lg px-4 py-2">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                        </div>
+                      </div>
+                    </div>
+                  )}
+              </div>
+            </ScrollArea>
+          </CardContent>
+
+          {error && (
+            <div className="px-4 py-2 bg-destructive/10 text-destructive text-sm flex items-center gap-2">
+              <AlertCircle className="h-4 w-4" />
+              {error.message}
+            </div>
+          )}
+
+          <div className="p-4 border-t">
+            <form
+              onSubmit={handleSubmit}
+              className="flex gap-2 items-end"
+            >
+              <MarkdownEditor
+                value={input}
+                onChange={setInput}
+                onSubmit={() => {
+                  if (!isLoading && input.trim()) {
+                    handleSubmit();
+                  }
+                }}
+                placeholder="Type a message... (Shift+Enter for new line)"
+                disabled={isLoading}
+              />
+              <Button
+                type="submit"
+                disabled={isLoading || !input.trim()}
+                className="shrink-0"
+              >
+                {isLoading ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Send className="h-4 w-4" />
+                )}
+              </Button>
+            </form>
+          </div>
+        </Card>
+      </div>
+    </PatchworkCtx.Provider>
+  );
+}