feat: add AI chat builder frontend — types, API client, store, components, page, routing
- TypeScript types for chat session, messages, and responses - API client module with all 6 endpoints - Zustand store with session management, message sending, tree generation, import, resume - 7 chat components: ChatMessage, ChatInput, ChatPanel, PhaseIndicator, ChatToolbar, EmptyPreview, StaticTreePreview - AIChatBuilderPage with split-panel layout (60% chat / 40% preview) - Route at /ai/chat with lazy loading - "Build with AI" button on TreeLibraryPage - Session resume via URL search params Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
72
frontend/src/components/ai-chat/ChatInput.tsx
Normal file
72
frontend/src/components/ai-chat/ChatInput.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { useState, useRef, useCallback } from 'react'
|
||||
import { Send } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface ChatInputProps {
|
||||
onSend: (content: string) => void
|
||||
disabled?: boolean
|
||||
placeholder?: string
|
||||
}
|
||||
|
||||
export function ChatInput({ onSend, disabled, placeholder = 'Type a message...' }: ChatInputProps) {
|
||||
const [value, setValue] = useState('')
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null)
|
||||
|
||||
const handleSend = useCallback(() => {
|
||||
const trimmed = value.trim()
|
||||
if (!trimmed || disabled) return
|
||||
onSend(trimmed)
|
||||
setValue('')
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = 'auto'
|
||||
}
|
||||
}, [value, disabled, onSend])
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
handleSend()
|
||||
}
|
||||
}
|
||||
|
||||
const handleInput = () => {
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = 'auto'
|
||||
textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 160) + 'px'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-end gap-2 border-t border-border bg-card px-4 py-3">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onInput={handleInput}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
rows={1}
|
||||
className={cn(
|
||||
'flex-1 resize-none rounded-lg border border-border bg-background px-3 py-2',
|
||||
'text-sm text-foreground placeholder:text-muted-foreground',
|
||||
'focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-none',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
'max-h-40'
|
||||
)}
|
||||
/>
|
||||
<button
|
||||
onClick={handleSend}
|
||||
disabled={disabled || !value.trim()}
|
||||
className={cn(
|
||||
'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg',
|
||||
'bg-gradient-brand text-white shadow-lg shadow-primary/20',
|
||||
'hover:opacity-90 transition-opacity',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
<Send className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
41
frontend/src/components/ai-chat/ChatMessage.tsx
Normal file
41
frontend/src/components/ai-chat/ChatMessage.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { Bot, User } from 'lucide-react'
|
||||
import { MarkdownContent } from '@/components/ui/MarkdownContent'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { ChatMessage as ChatMessageType } from '@/types'
|
||||
|
||||
interface ChatMessageProps {
|
||||
message: ChatMessageType
|
||||
}
|
||||
|
||||
export function ChatMessage({ message }: ChatMessageProps) {
|
||||
const isAI = message.role === 'assistant'
|
||||
|
||||
return (
|
||||
<div className={cn('flex gap-3', isAI ? 'items-start' : 'items-start justify-end')}>
|
||||
{isAI && (
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">
|
||||
<Bot className="h-4 w-4 text-primary" />
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
'max-w-[85%] rounded-xl px-4 py-3',
|
||||
isAI
|
||||
? 'bg-card border border-border'
|
||||
: 'bg-primary/10 border border-primary/20'
|
||||
)}
|
||||
>
|
||||
{isAI ? (
|
||||
<MarkdownContent content={message.content} className="text-sm" />
|
||||
) : (
|
||||
<p className="text-sm text-foreground whitespace-pre-wrap">{message.content}</p>
|
||||
)}
|
||||
</div>
|
||||
{!isAI && (
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-accent">
|
||||
<User className="h-4 w-4 text-foreground" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
47
frontend/src/components/ai-chat/ChatPanel.tsx
Normal file
47
frontend/src/components/ai-chat/ChatPanel.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { ChatMessage } from './ChatMessage'
|
||||
import { ChatInput } from './ChatInput'
|
||||
import { Spinner } from '@/components/common/Spinner'
|
||||
import type { ChatMessage as ChatMessageType } from '@/types'
|
||||
|
||||
interface ChatPanelProps {
|
||||
messages: ChatMessageType[]
|
||||
isResponding: boolean
|
||||
onSendMessage: (content: string) => void
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export function ChatPanel({ messages, isResponding, onSendMessage, disabled }: ChatPanelProps) {
|
||||
const scrollRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
// Auto-scroll to bottom on new messages
|
||||
useEffect(() => {
|
||||
if (scrollRef.current) {
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight
|
||||
}
|
||||
}, [messages, isResponding])
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Messages */}
|
||||
<div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
|
||||
{messages.map((msg, i) => (
|
||||
<ChatMessage key={i} message={msg} />
|
||||
))}
|
||||
{isResponding && (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Spinner size="sm" />
|
||||
<span>Thinking...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Input */}
|
||||
<ChatInput
|
||||
onSend={onSendMessage}
|
||||
disabled={disabled || isResponding}
|
||||
placeholder={isResponding ? 'Waiting for response...' : 'Type a message...'}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
76
frontend/src/components/ai-chat/ChatToolbar.tsx
Normal file
76
frontend/src/components/ai-chat/ChatToolbar.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { Sparkles, Download, RotateCcw, ArrowRight } from 'lucide-react'
|
||||
import { PhaseIndicator } from './PhaseIndicator'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { InterviewPhase } from '@/types'
|
||||
|
||||
interface ChatToolbarProps {
|
||||
currentPhase: InterviewPhase
|
||||
status: 'idle' | 'active' | 'completed' | 'abandoned'
|
||||
isGenerating: boolean
|
||||
hasGeneratedTree: boolean
|
||||
onGenerate: () => void
|
||||
onImport: () => void
|
||||
onReset: () => void
|
||||
}
|
||||
|
||||
export function ChatToolbar({
|
||||
currentPhase,
|
||||
status,
|
||||
isGenerating,
|
||||
hasGeneratedTree,
|
||||
onGenerate,
|
||||
onImport,
|
||||
onReset,
|
||||
}: ChatToolbarProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between border-b border-border bg-card px-4 py-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
|
||||
<Sparkles className="h-4 w-4 text-primary" />
|
||||
Build with AI
|
||||
</div>
|
||||
<PhaseIndicator currentPhase={currentPhase} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{status === 'active' && !hasGeneratedTree && (
|
||||
<button
|
||||
onClick={onGenerate}
|
||||
disabled={isGenerating}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium',
|
||||
'bg-gradient-brand text-white shadow-lg shadow-primary/20',
|
||||
'hover:opacity-90 transition-opacity',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
{isGenerating ? 'Generating...' : 'Generate Flow'}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{hasGeneratedTree && (
|
||||
<button
|
||||
onClick={onImport}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium',
|
||||
'bg-gradient-brand text-white shadow-lg shadow-primary/20',
|
||||
'hover:opacity-90 transition-opacity'
|
||||
)}
|
||||
>
|
||||
<ArrowRight className="h-3.5 w-3.5" />
|
||||
Import to Editor
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={onReset}
|
||||
className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
|
||||
>
|
||||
<RotateCcw className="h-3.5 w-3.5" />
|
||||
Start Over
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
13
frontend/src/components/ai-chat/EmptyPreview.tsx
Normal file
13
frontend/src/components/ai-chat/EmptyPreview.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { TreeDeciduous } from 'lucide-react'
|
||||
|
||||
export function EmptyPreview() {
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center p-8 text-center">
|
||||
<TreeDeciduous className="h-12 w-12 text-muted-foreground/30 mb-4" />
|
||||
<h3 className="text-sm font-medium text-muted-foreground mb-1">Flow Preview</h3>
|
||||
<p className="text-xs text-muted-foreground/70 max-w-48">
|
||||
Your flow will appear here as you describe it to the AI
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
50
frontend/src/components/ai-chat/PhaseIndicator.tsx
Normal file
50
frontend/src/components/ai-chat/PhaseIndicator.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { InterviewPhase } from '@/types'
|
||||
|
||||
const PHASES: { key: InterviewPhase; label: string }[] = [
|
||||
{ key: 'scoping', label: 'Scoping' },
|
||||
{ key: 'discovery', label: 'Discovery' },
|
||||
{ key: 'enrichment', label: 'Enrichment' },
|
||||
{ key: 'review', label: 'Review' },
|
||||
{ key: 'generation', label: 'Generate' },
|
||||
]
|
||||
|
||||
interface PhaseIndicatorProps {
|
||||
currentPhase: InterviewPhase
|
||||
}
|
||||
|
||||
export function PhaseIndicator({ currentPhase }: PhaseIndicatorProps) {
|
||||
const currentIndex = PHASES.findIndex((p) => p.key === currentPhase)
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
{PHASES.map((phase, i) => {
|
||||
const isActive = phase.key === currentPhase
|
||||
const isCompleted = i < currentIndex
|
||||
|
||||
return (
|
||||
<div key={phase.key} className="flex items-center">
|
||||
{i > 0 && (
|
||||
<div
|
||||
className={cn(
|
||||
'mx-1 h-px w-4',
|
||||
isCompleted ? 'bg-primary' : 'bg-border'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<span
|
||||
className={cn(
|
||||
'font-label text-[0.6875rem] uppercase tracking-wide px-2 py-0.5 rounded',
|
||||
isActive && 'text-primary bg-primary/10 font-medium',
|
||||
isCompleted && 'text-primary',
|
||||
!isActive && !isCompleted && 'text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
{phase.label}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
80
frontend/src/components/ai-chat/StaticTreePreview.tsx
Normal file
80
frontend/src/components/ai-chat/StaticTreePreview.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import { useState, useMemo, useCallback } from 'react'
|
||||
import { TreePreviewNode } from '@/components/tree-preview/TreePreviewNode'
|
||||
import type { SharedLinksMap } from '@/components/tree-preview/TreePreviewPanel'
|
||||
import type { TreeStructure } from '@/types'
|
||||
|
||||
interface StaticTreePreviewProps {
|
||||
tree: TreeStructure
|
||||
name?: string
|
||||
}
|
||||
|
||||
function findNodeInTree(nodeId: string, tree: TreeStructure): TreeStructure | null {
|
||||
if (tree.id === nodeId) return tree
|
||||
if (tree.children) {
|
||||
for (const child of tree.children) {
|
||||
const found = findNodeInTree(nodeId, child)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function buildSharedLinksMap(node: TreeStructure, map: SharedLinksMap = new Map()): SharedLinksMap {
|
||||
const nodeLabel = node.type === 'decision' ? node.question : node.title
|
||||
if (node.type === 'decision' && node.options) {
|
||||
for (const opt of node.options) {
|
||||
if (opt.next_node_id) {
|
||||
const existing = map.get(opt.next_node_id) || []
|
||||
existing.push({ id: node.id, label: nodeLabel || 'Untitled' })
|
||||
map.set(opt.next_node_id, existing)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (node.type === 'action' && node.next_node_id) {
|
||||
const existing = map.get(node.next_node_id) || []
|
||||
existing.push({ id: node.id, label: nodeLabel || 'Untitled' })
|
||||
map.set(node.next_node_id, existing)
|
||||
}
|
||||
if (node.children) {
|
||||
for (const child of node.children) {
|
||||
buildSharedLinksMap(child, map)
|
||||
}
|
||||
}
|
||||
return map
|
||||
}
|
||||
|
||||
export function StaticTreePreview({ tree, name }: StaticTreePreviewProps) {
|
||||
const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null)
|
||||
|
||||
const findNode = useCallback(
|
||||
(nodeId: string) => findNodeInTree(nodeId, tree),
|
||||
[tree]
|
||||
)
|
||||
|
||||
const sharedLinksMap = useMemo(() => buildSharedLinksMap(tree), [tree])
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="border-b border-border px-4 py-2">
|
||||
<h3 className="text-sm font-semibold text-foreground">
|
||||
Preview: {name || 'Untitled Flow'}
|
||||
</h3>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Click a node to select
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto p-4">
|
||||
<div className="inline-block min-w-full">
|
||||
<TreePreviewNode
|
||||
node={tree}
|
||||
selectedNodeId={selectedNodeId}
|
||||
onSelect={setSelectedNodeId}
|
||||
depth={0}
|
||||
findNode={findNode}
|
||||
sharedLinksMap={sharedLinksMap}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user