Fix/minor issues

.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "next/core-web-vitals"
+  ]
+}

ARTIFACT_SYSTEM_ANALYSIS.md

@@ -0,0 +1,226 @@
+# Artifact System Analysis - Agent Chat UI
+
+## Overview
+
+The Agent Chat UI implements a sophisticated artifact system that allows AI agents to render custom UI components in a dedicated side panel. This system enables rich, interactive content display beyond simple text responses, creating a more engaging user experience.
+
+## Architecture
+
+### Core Components
+
+The artifact system is built around several key components that work together to provide seamless artifact rendering:
+
+#### 1. **ArtifactProvider** (`src/components/thread/artifact.tsx`)
+- **Purpose**: Root context provider that manages global artifact state
+- **Functionality**: 
+  - Manages which artifact is currently open/mounted
+  - Provides DOM element references for title and content areas
+  - Handles artifact context sharing between components
+- **State Management**:
+  - `open`: Tracks which artifact ID is currently open
+  - `mounted`: Tracks which artifact is currently mounted in the DOM
+  - `title`/`content`: DOM element references for portal rendering
+  - `context`: Shared context data between artifacts
+
+#### 2. **ArtifactSlot** (Internal Component)
+- **Purpose**: Headless component that manages artifact content rendering
+- **Key Features**:
+  - Uses React Portals to render content in designated areas
+  - Handles mounting/unmounting logic
+  - Manages empty state cleanup
+- **Portal System**: Renders artifact title and content into specific DOM locations
+
+#### 3. **ArtifactContent & ArtifactTitle** (Layout Components)
+- **ArtifactContent**: Renders the main artifact content area in the side panel
+- **ArtifactTitle**: Renders the artifact title in the side panel header
+- **Integration**: Both components provide DOM element references for portal rendering
+
+#### 4. **useArtifact Hook**
+- **Purpose**: Primary interface for components to interact with the artifact system
+- **Returns**: `[ArtifactComponent, { open, setOpen, context, setContext }]`
+- **Features**:
+  - Generates unique artifact IDs
+  - Provides open/close state management
+  - Enables context sharing between artifacts
+  - Returns a component for rendering artifact content
+
+### Integration Points
+
+#### 1. **LoadExternalComponent Integration**
+```tsx
+// In AI message component
+const artifact = useArtifact();
+<LoadExternalComponent
+  stream={thread}
+  message={customComponent}
+  meta={{ ui: customComponent, artifact }}
+/>
+```
+
+#### 2. **Side Panel Layout**
+The main thread component includes a dedicated side panel for artifact rendering:
+```tsx
+<div className="relative flex flex-col border-l">
+  <div className="absolute inset-0 flex min-w-[30vw] flex-col">
+    <div className="grid grid-cols-[1fr_auto] border-b p-4">
+      <ArtifactTitle className="truncate overflow-hidden" />
+      <button onClick={closeArtifact}>
+        <XIcon className="size-5" />
+      </button>
+    </div>
+    <ArtifactContent className="relative flex-grow" />
+  </div>
+</div>
+```
+
+## Usage Patterns
+
+### Basic Artifact Implementation
+
+```tsx
+export function Writer(props: {
+  title?: string;
+  content?: string;
+  description?: string;
+}) {
+  const [Artifact, { open, setOpen }] = useArtifact();
+
+  return (
+    <>
+      {/* Trigger Component */}
+      <div
+        onClick={() => setOpen(!open)}
+        className="cursor-pointer rounded-lg border p-4"
+      >
+        <p className="font-medium">{props.title}</p>
+        <p className="text-sm text-gray-500">{props.description}</p>
+      </div>
+
+      {/* Artifact Content */}
+      <Artifact title={props.title}>
+        <p className="p-4 whitespace-pre-wrap">{props.content}</p>
+      </Artifact>
+    </>
+  );
+}
+```
+
+### Key Features
+
+1. **Portal-Based Rendering**: Uses React Portals to render content in the side panel
+2. **State Management**: Centralized state for open/closed artifacts
+3. **Context Sharing**: Artifacts can share context data for complex interactions
+4. **Responsive Design**: Side panel adapts to screen size (min-width: 30vw)
+5. **Clean Lifecycle**: Automatic cleanup when artifacts are unmounted
+
+## Existing UI Components
+
+The system leverages a comprehensive set of UI components built with shadcn/ui:
+
+### Core UI Components (`src/components/ui/`)
+
+1. **Avatar** (`avatar.tsx`)
+   - Avatar root container with rounded styling
+   - AvatarImage for profile pictures
+   - AvatarFallback for placeholder content
+
+2. **Button** (`button.tsx`)
+   - Multiple variants: default, destructive, outline, secondary, ghost, link
+   - Size variants: default, sm, lg, icon
+   - Built with Radix UI Slot for composition
+
+3. **Card** (`card.tsx`)
+   - Card container with shadow and border
+   - CardHeader, CardTitle, CardDescription
+   - CardContent, CardFooter for structured layouts
+
+4. **Input** (`input.tsx`)
+   - Styled text input with focus states
+   - File input support
+   - Validation state styling (aria-invalid)
+
+5. **Label** (`label.tsx`)
+   - Form labels with proper accessibility
+   - Built with Radix UI Label primitive
+
+6. **Separator** (`separator.tsx`)
+   - Horizontal/vertical dividers
+   - Built with Radix UI Separator
+
+7. **Sheet** (`sheet.tsx`)
+   - Slide-out panels and drawers
+   - Built with Radix UI Dialog
+
+8. **Skeleton** (`skeleton.tsx`)
+   - Loading state placeholders
+   - Animated shimmer effect
+
+9. **Sonner** (`sonner.tsx`)
+   - Toast notifications
+   - Theme-aware styling
+
+10. **Switch** (`switch.tsx`)
+    - Toggle switches
+    - Built with Radix UI Switch
+
+11. **Textarea** (`textarea.tsx`)
+    - Multi-line text input
+    - Auto-sizing support
+
+12. **Tooltip** (`tooltip.tsx`)
+    - Hover/focus tooltips
+    - Built with Radix UI Tooltip
+
+### Specialized Components
+
+1. **Thread Components**
+   - Message rendering (AI, Human, Tool calls)
+   - Markdown text rendering with syntax highlighting
+   - File upload and multimodal content preview
+   - Agent inbox for interrupts and interactions
+
+2. **Icon Components**
+   - GitHub and LangGraph branded icons
+   - Lucide React icon library integration
+
+## Technical Implementation Details
+
+### Context Architecture
+```tsx
+const ArtifactSlotContext = createContext<{
+  open: [string | null, Setter<string | null>];
+  mounted: [string | null, Setter<string | null>];
+  title: [HTMLElement | null, Setter<HTMLElement | null>];
+  content: [HTMLElement | null, Setter<HTMLElement | null>];
+  context: [Record<string, unknown>, Setter<Record<string, unknown>>];
+}>(null!);
+```
+
+### Portal System
+- Uses `createPortal` to render artifact content in designated DOM locations
+- Maintains separation between artifact logic and presentation
+- Enables flexible layout without prop drilling
+
+### State Management
+- Single artifact open at a time (managed by artifact ID)
+- Automatic cleanup when artifacts become empty
+- Context preservation for complex artifact interactions
+
+## Benefits
+
+1. **Separation of Concerns**: Artifacts are self-contained with their own logic
+2. **Flexible Rendering**: Portal system allows rendering anywhere in the DOM
+3. **Rich Interactions**: Support for complex UI components and interactions
+4. **Responsive Design**: Adapts to different screen sizes
+5. **Developer Experience**: Simple hook-based API for artifact creation
+6. **Performance**: Efficient mounting/unmounting with proper cleanup
+
+## Future Considerations
+
+1. **Multiple Artifacts**: Currently supports one open artifact at a time
+2. **Artifact Persistence**: Context sharing enables stateful artifacts
+3. **Animation Support**: Could be enhanced with transition animations
+4. **Mobile Optimization**: Side panel behavior on mobile devices
+5. **Accessibility**: Ensure proper ARIA labels and keyboard navigation
+
+This artifact system provides a robust foundation for creating rich, interactive AI agent interfaces that go beyond traditional chat experiences.