refactor: remove standalone Flow Assist page and old AI chat components
Remove the old /ai/chat page, AI wizard modal, and all associated components/stores/types now replaced by the editor-embedded AI panel. Deleted: - AIChatBuilderPage, ai-chat/ components, aiChatStore, aiChat API, ai-chat types - AIFlowBuilderModal, ai-builder/ components, aiFlowBuilderStore Cleaned up: - Router (removed /ai/chat route) - Sidebar (removed Flow Assist nav item) - MyTreesPage (removed AI builder modal and button) - TreeLibraryPage (removed Flow Assist button) - API and type barrel exports Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
@@ -1,44 +0,0 @@
|
|||||||
import { apiClient } from './client'
|
|
||||||
import type {
|
|
||||||
AIChatStartResponse,
|
|
||||||
AIChatMessageResponse,
|
|
||||||
AIChatSessionResponse,
|
|
||||||
AIChatGenerateResponse,
|
|
||||||
AIChatImportResponse,
|
|
||||||
} from '@/types'
|
|
||||||
|
|
||||||
export const aiChatApi = {
|
|
||||||
startSession: async (flowType: 'troubleshooting' | 'procedural'): Promise<AIChatStartResponse> => {
|
|
||||||
const { data } = await apiClient.post('/ai/chat/sessions', { flow_type: flowType })
|
|
||||||
return data
|
|
||||||
},
|
|
||||||
|
|
||||||
sendMessage: async (sessionId: string, content: string): Promise<AIChatMessageResponse> => {
|
|
||||||
const { data } = await apiClient.post(`/ai/chat/sessions/${sessionId}/messages`, { content })
|
|
||||||
return data
|
|
||||||
},
|
|
||||||
|
|
||||||
getSession: async (sessionId: string): Promise<AIChatSessionResponse> => {
|
|
||||||
const { data } = await apiClient.get(`/ai/chat/sessions/${sessionId}`)
|
|
||||||
return data
|
|
||||||
},
|
|
||||||
|
|
||||||
generateTree: async (sessionId: string): Promise<AIChatGenerateResponse> => {
|
|
||||||
const { data } = await apiClient.post(`/ai/chat/sessions/${sessionId}/generate`)
|
|
||||||
return data
|
|
||||||
},
|
|
||||||
|
|
||||||
importTree: async (
|
|
||||||
sessionId: string,
|
|
||||||
params?: { name?: string; description?: string; category_id?: string; tags?: string[] }
|
|
||||||
): Promise<AIChatImportResponse> => {
|
|
||||||
const { data } = await apiClient.post(`/ai/chat/sessions/${sessionId}/import`, params || {})
|
|
||||||
return data
|
|
||||||
},
|
|
||||||
|
|
||||||
abandonSession: async (sessionId: string): Promise<void> => {
|
|
||||||
await apiClient.delete(`/ai/chat/sessions/${sessionId}`)
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
export default aiChatApi
|
|
||||||
@@ -17,7 +17,6 @@ export { targetListsApi } from './targetLists'
|
|||||||
export { maintenanceSchedulesApi, batchLaunchApi } from './maintenanceSchedules'
|
export { maintenanceSchedulesApi, batchLaunchApi } from './maintenanceSchedules'
|
||||||
export { default as feedbackApi } from './feedback'
|
export { default as feedbackApi } from './feedback'
|
||||||
export { default as aiBuilderApi } from './aiBuilder'
|
export { default as aiBuilderApi } from './aiBuilder'
|
||||||
export { default as aiChatApi } from './aiChat'
|
|
||||||
export { copilotApi } from './copilot'
|
export { copilotApi } from './copilot'
|
||||||
export { assistantChatApi } from './assistantChat'
|
export { assistantChatApi } from './assistantChat'
|
||||||
export { flowTransferApi } from './flowTransfer'
|
export { flowTransferApi } from './flowTransfer'
|
||||||
|
|||||||
@@ -1,168 +0,0 @@
|
|||||||
import { useEffect, useRef } from 'react'
|
|
||||||
import { useNavigate } from 'react-router-dom'
|
|
||||||
import { Modal } from '@/components/common/Modal'
|
|
||||||
import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
|
|
||||||
import { treesApi } from '@/api/trees'
|
|
||||||
import { toast } from '@/lib/toast'
|
|
||||||
import { WizardStepIndicator } from './WizardStepIndicator'
|
|
||||||
import { FoundationForm } from './FoundationForm'
|
|
||||||
import { BranchSelector } from './BranchSelector'
|
|
||||||
import { BranchDetailView } from './BranchDetailView'
|
|
||||||
import { TreePreviewCard } from './TreePreviewCard'
|
|
||||||
import { GeneratingAnimation } from './GeneratingAnimation'
|
|
||||||
|
|
||||||
interface AIFlowBuilderModalProps {
|
|
||||||
isOpen: boolean
|
|
||||||
onClose: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AIFlowBuilderModal({ isOpen, onClose }: AIFlowBuilderModalProps) {
|
|
||||||
const navigate = useNavigate()
|
|
||||||
const {
|
|
||||||
phase,
|
|
||||||
metadata,
|
|
||||||
assembledTree,
|
|
||||||
loadQuota,
|
|
||||||
scaffold,
|
|
||||||
reset,
|
|
||||||
} = useAIFlowBuilderStore()
|
|
||||||
|
|
||||||
// Load quota when modal opens
|
|
||||||
useEffect(() => {
|
|
||||||
if (isOpen) {
|
|
||||||
loadQuota()
|
|
||||||
}
|
|
||||||
}, [isOpen, loadQuota])
|
|
||||||
|
|
||||||
// Auto-trigger scaffold after conversation starts (ref prevents double-fire)
|
|
||||||
const hasTriggeredScaffold = useRef(false)
|
|
||||||
useEffect(() => {
|
|
||||||
// Reset guard when wizard resets to foundation (Start Over or close)
|
|
||||||
if (phase === 'foundation') {
|
|
||||||
hasTriggeredScaffold.current = false
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (phase === 'scaffolding' && !hasTriggeredScaffold.current && !useAIFlowBuilderStore.getState().suggestedBranches.length) {
|
|
||||||
hasTriggeredScaffold.current = true
|
|
||||||
scaffold()
|
|
||||||
}
|
|
||||||
}, [phase, scaffold])
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
reset()
|
|
||||||
onClose()
|
|
||||||
}
|
|
||||||
|
|
||||||
const createTree = async () => {
|
|
||||||
if (!assembledTree) return null
|
|
||||||
try {
|
|
||||||
return await treesApi.create({
|
|
||||||
name: assembledTree.suggested_name,
|
|
||||||
description: assembledTree.suggested_description,
|
|
||||||
tree_structure: assembledTree.tree_structure,
|
|
||||||
tree_type: metadata.flow_type,
|
|
||||||
status: 'draft',
|
|
||||||
})
|
|
||||||
} catch {
|
|
||||||
toast.error('Failed to create flow. Please try again.')
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleOpenInEditor = async () => {
|
|
||||||
const tree = await createTree()
|
|
||||||
if (!tree) return
|
|
||||||
handleClose()
|
|
||||||
const editorPath =
|
|
||||||
metadata.flow_type === 'procedural'
|
|
||||||
? `/flows/${tree.id}/edit`
|
|
||||||
: `/trees/${tree.id}/edit`
|
|
||||||
navigate(editorPath)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleStartFlow = async () => {
|
|
||||||
const tree = await createTree()
|
|
||||||
if (!tree) return
|
|
||||||
handleClose()
|
|
||||||
const navigatePath =
|
|
||||||
metadata.flow_type === 'procedural'
|
|
||||||
? `/flows/${tree.id}/navigate`
|
|
||||||
: `/trees/${tree.id}/navigate`
|
|
||||||
navigate(navigatePath)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleBuildAnother = () => {
|
|
||||||
reset()
|
|
||||||
}
|
|
||||||
|
|
||||||
const getTitle = () => {
|
|
||||||
switch (phase) {
|
|
||||||
case 'foundation':
|
|
||||||
return 'Flow Assist'
|
|
||||||
case 'scaffolding':
|
|
||||||
case 'generating':
|
|
||||||
return 'AI Scaffold'
|
|
||||||
case 'detailing':
|
|
||||||
return 'Branch Detail'
|
|
||||||
case 'reviewing':
|
|
||||||
return 'Review & Assemble'
|
|
||||||
case 'error':
|
|
||||||
return 'Flow Assist'
|
|
||||||
default:
|
|
||||||
return 'Flow Assist'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
isOpen={isOpen}
|
|
||||||
onClose={handleClose}
|
|
||||||
title={getTitle()}
|
|
||||||
size="lg"
|
|
||||||
footer={
|
|
||||||
<WizardStepIndicator phase={phase} />
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{phase === 'foundation' && <FoundationForm />}
|
|
||||||
{phase === 'scaffolding' && <BranchSelector />}
|
|
||||||
{phase === 'generating' && <GeneratingAnimation />}
|
|
||||||
{phase === 'detailing' && <BranchDetailView />}
|
|
||||||
{phase === 'reviewing' && (
|
|
||||||
<TreePreviewCard
|
|
||||||
onOpenInEditor={handleOpenInEditor}
|
|
||||||
onStartFlow={handleStartFlow}
|
|
||||||
onBuildAnother={handleBuildAnother}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{phase === 'error' && <ErrorView />}
|
|
||||||
</Modal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function ErrorView() {
|
|
||||||
const { error, reset, setPhase } = useAIFlowBuilderStore()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center gap-4 py-8">
|
|
||||||
<div className="rounded-lg border border-red-400/20 bg-red-400/5 px-4 py-3 text-sm text-red-400">
|
|
||||||
{error || 'An unexpected error occurred.'}
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setPhase('foundation')}
|
|
||||||
className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
||||||
>
|
|
||||||
Go Back
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={reset}
|
|
||||||
className="rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
|
|
||||||
>
|
|
||||||
Start Over
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,259 +0,0 @@
|
|||||||
import { Check, RefreshCw, SkipForward, ChevronRight, ChevronLeft, Zap, Square } from 'lucide-react'
|
|
||||||
import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
|
|
||||||
import { GeneratingAnimation } from './GeneratingAnimation'
|
|
||||||
import { cn } from '@/lib/utils'
|
|
||||||
|
|
||||||
export function BranchDetailView() {
|
|
||||||
const {
|
|
||||||
selectedBranches,
|
|
||||||
currentBranchIndex,
|
|
||||||
generateBranchDetail,
|
|
||||||
assemble,
|
|
||||||
isLoading,
|
|
||||||
error,
|
|
||||||
phase,
|
|
||||||
setError,
|
|
||||||
isGeneratingAll,
|
|
||||||
generateAllBranchDetails,
|
|
||||||
cancelGenerateAll,
|
|
||||||
} = useAIFlowBuilderStore()
|
|
||||||
|
|
||||||
const viewingIndex = currentBranchIndex
|
|
||||||
const setViewingIndex = (i: number) => useAIFlowBuilderStore.setState({ currentBranchIndex: i })
|
|
||||||
const currentBranch = selectedBranches[viewingIndex]
|
|
||||||
|
|
||||||
const allBranchesHaveDetail = selectedBranches.every((b) => b.steps)
|
|
||||||
const branchesWithDetail = selectedBranches.filter((b) => b.steps).length
|
|
||||||
|
|
||||||
const handleGenerate = async (branchName: string) => {
|
|
||||||
setError(null)
|
|
||||||
await generateBranchDetail(branchName)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleAssemble = async () => {
|
|
||||||
await assemble()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (phase === 'generating' && isLoading) {
|
|
||||||
return (
|
|
||||||
<GeneratingAnimation
|
|
||||||
branchContext={
|
|
||||||
isGeneratingAll
|
|
||||||
? {
|
|
||||||
current: selectedBranches.filter((b) => b.steps).length + 1,
|
|
||||||
total: selectedBranches.length,
|
|
||||||
}
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
|
|
||||||
{/* Content area */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
{/* Branch tabs */}
|
|
||||||
<div className="flex items-center gap-2 overflow-x-auto pb-1">
|
|
||||||
{selectedBranches.map((branch, i) => (
|
|
||||||
<button
|
|
||||||
key={branch.name}
|
|
||||||
type="button"
|
|
||||||
onClick={() => setViewingIndex(i)}
|
|
||||||
className={cn(
|
|
||||||
'flex shrink-0 items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors',
|
|
||||||
viewingIndex === i
|
|
||||||
? 'border-primary/30 bg-primary/10 text-foreground'
|
|
||||||
: 'border-border text-muted-foreground hover:bg-accent',
|
|
||||||
branch.steps && 'pr-2'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{branch.name}
|
|
||||||
{branch.steps && (
|
|
||||||
<Check className="h-3 w-3 text-green-400" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Current branch detail */}
|
|
||||||
{currentBranch && (
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h3 className="text-sm font-medium text-foreground">{currentBranch.name}</h3>
|
|
||||||
<p className="text-xs text-muted-foreground">{currentBranch.description}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{currentBranch.steps ? (
|
|
||||||
<div className="space-y-3">
|
|
||||||
{/* Mini tree preview */}
|
|
||||||
<div className="max-h-48 overflow-y-auto rounded-lg border border-border bg-accent/30 p-3">
|
|
||||||
<NodePreview node={currentBranch.steps} depth={0} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => handleGenerate(currentBranch.name)}
|
|
||||||
disabled={isLoading || isGeneratingAll}
|
|
||||||
className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<RefreshCw className="h-3 w-3" />
|
|
||||||
Regenerate
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex flex-col items-center gap-4 rounded-lg border border-dashed border-border bg-accent/20 py-8">
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Generate AI detail for this branch
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Generate All — primary action, shown when multiple branches remain */}
|
|
||||||
{selectedBranches.filter((b) => !b.steps).length > 1 && (
|
|
||||||
isGeneratingAll ? (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={cancelGenerateAll}
|
|
||||||
className="flex items-center gap-2 rounded-lg border border-red-400/30 bg-red-400/10 px-5 py-2.5 text-sm font-medium text-red-400 hover:bg-red-400/20"
|
|
||||||
>
|
|
||||||
<Square className="h-4 w-4" />
|
|
||||||
Stop Generating
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={generateAllBranchDetails}
|
|
||||||
disabled={isLoading}
|
|
||||||
className="flex items-center gap-2 rounded-lg bg-gradient-brand px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<Zap className="h-4 w-4" />
|
|
||||||
Generate All {selectedBranches.filter((b) => !b.steps).length} Branches
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Divider + secondary actions */}
|
|
||||||
{selectedBranches.filter((b) => !b.steps).length > 1 && (
|
|
||||||
<div className="flex items-center gap-3 text-xs text-muted-foreground">
|
|
||||||
<div className="h-px w-8 bg-border" />
|
|
||||||
or
|
|
||||||
<div className="h-px w-8 bg-border" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => handleGenerate(currentBranch.name)}
|
|
||||||
disabled={isLoading || isGeneratingAll}
|
|
||||||
className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
|
|
||||||
>
|
|
||||||
Generate this branch
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
if (viewingIndex < selectedBranches.length - 1) {
|
|
||||||
setViewingIndex(viewingIndex + 1)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
disabled={isGeneratingAll}
|
|
||||||
className="flex items-center gap-1 rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<SkipForward className="h-3 w-3" />
|
|
||||||
Skip
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Error */}
|
|
||||||
{error && (
|
|
||||||
<div className="rounded-lg border border-red-400/20 bg-red-400/5 px-3 py-2 text-sm text-red-400">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Navigation — sticky so it's always visible */}
|
|
||||||
<div className="sticky bottom-0 flex items-center justify-between border-t border-border bg-card pt-3 pb-1">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setViewingIndex(Math.max(0, viewingIndex - 1))}
|
|
||||||
disabled={viewingIndex === 0}
|
|
||||||
className="flex items-center gap-1 rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent disabled:opacity-30"
|
|
||||||
>
|
|
||||||
<ChevronLeft className="h-3.5 w-3.5" />
|
|
||||||
Previous
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() =>
|
|
||||||
setViewingIndex(Math.min(selectedBranches.length - 1, viewingIndex + 1))
|
|
||||||
}
|
|
||||||
disabled={viewingIndex === selectedBranches.length - 1}
|
|
||||||
className="flex items-center gap-1 rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent disabled:opacity-30"
|
|
||||||
>
|
|
||||||
Next
|
|
||||||
<ChevronRight className="h-3.5 w-3.5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
{branchesWithDetail}/{selectedBranches.length} detailed
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleAssemble}
|
|
||||||
disabled={!allBranchesHaveDetail || isLoading}
|
|
||||||
className={cn(
|
|
||||||
'rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
|
|
||||||
allBranchesHaveDetail && !isLoading
|
|
||||||
? 'hover:opacity-90'
|
|
||||||
: 'cursor-not-allowed opacity-50'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
Assemble Tree
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Recursive mini-preview of a node tree */
|
|
||||||
function NodePreview({ node, depth }: { node: Record<string, unknown>; depth: number }) {
|
|
||||||
const type = node.type as string
|
|
||||||
const label =
|
|
||||||
type === 'decision'
|
|
||||||
? (node.question as string)
|
|
||||||
: (node.title as string) || 'Untitled'
|
|
||||||
const children = (node.children as Record<string, unknown>[]) || []
|
|
||||||
|
|
||||||
const typeColors: Record<string, string> = {
|
|
||||||
decision: 'bg-blue-400',
|
|
||||||
action: 'bg-amber-400',
|
|
||||||
solution: 'bg-green-400',
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ marginLeft: depth * 16 }}>
|
|
||||||
<div className="flex items-center gap-2 py-0.5">
|
|
||||||
<div className={cn('h-2 w-2 rounded-full', typeColors[type] || 'bg-muted-foreground')} />
|
|
||||||
<span className="text-xs text-foreground truncate">{label}</span>
|
|
||||||
<span className="text-[10px] font-label text-muted-foreground">{type}</span>
|
|
||||||
</div>
|
|
||||||
{children.map((child) => (
|
|
||||||
<NodePreview key={child.id as string ?? crypto.randomUUID()} node={child} depth={depth + 1} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,292 +0,0 @@
|
|||||||
import { useState } from 'react'
|
|
||||||
import { GripVertical, Plus, X, Pencil, Check, RefreshCw } from 'lucide-react'
|
|
||||||
import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
|
|
||||||
import { cn } from '@/lib/utils'
|
|
||||||
import type { AIBranch } from '@/types'
|
|
||||||
|
|
||||||
export function BranchSelector() {
|
|
||||||
const {
|
|
||||||
suggestedBranches,
|
|
||||||
selectedBranches,
|
|
||||||
selectBranches,
|
|
||||||
setPhase,
|
|
||||||
scaffold,
|
|
||||||
isLoading,
|
|
||||||
error,
|
|
||||||
} = useAIFlowBuilderStore()
|
|
||||||
|
|
||||||
const [editingIndex, setEditingIndex] = useState<number | null>(null)
|
|
||||||
const [editName, setEditName] = useState('')
|
|
||||||
const [editDesc, setEditDesc] = useState('')
|
|
||||||
const [showAddForm, setShowAddForm] = useState(false)
|
|
||||||
const [newName, setNewName] = useState('')
|
|
||||||
const [newDesc, setNewDesc] = useState('')
|
|
||||||
|
|
||||||
const toggleBranch = (branch: AIBranch) => {
|
|
||||||
const isSelected = selectedBranches.some((b) => b.name === branch.name)
|
|
||||||
if (isSelected) {
|
|
||||||
selectBranches(selectedBranches.filter((b) => b.name !== branch.name))
|
|
||||||
} else {
|
|
||||||
selectBranches([...selectedBranches, branch])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const startEditing = (index: number) => {
|
|
||||||
const branch = selectedBranches[index]
|
|
||||||
setEditingIndex(index)
|
|
||||||
setEditName(branch.name)
|
|
||||||
setEditDesc(branch.description)
|
|
||||||
}
|
|
||||||
|
|
||||||
const saveEdit = () => {
|
|
||||||
if (editingIndex === null || !editName.trim()) return
|
|
||||||
const updated = [...selectedBranches]
|
|
||||||
updated[editingIndex] = {
|
|
||||||
...updated[editingIndex],
|
|
||||||
name: editName.trim(),
|
|
||||||
description: editDesc.trim(),
|
|
||||||
}
|
|
||||||
selectBranches(updated)
|
|
||||||
setEditingIndex(null)
|
|
||||||
}
|
|
||||||
|
|
||||||
const addCustomBranch = () => {
|
|
||||||
if (!newName.trim()) return
|
|
||||||
const branch: AIBranch = {
|
|
||||||
name: newName.trim(),
|
|
||||||
description: newDesc.trim(),
|
|
||||||
isCustom: true,
|
|
||||||
}
|
|
||||||
selectBranches([...selectedBranches, branch])
|
|
||||||
setNewName('')
|
|
||||||
setNewDesc('')
|
|
||||||
setShowAddForm(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
const moveBranch = (fromIndex: number, direction: 'up' | 'down') => {
|
|
||||||
const toIndex = direction === 'up' ? fromIndex - 1 : fromIndex + 1
|
|
||||||
if (toIndex < 0 || toIndex >= selectedBranches.length) return
|
|
||||||
const updated = [...selectedBranches]
|
|
||||||
;[updated[fromIndex], updated[toIndex]] = [updated[toIndex], updated[fromIndex]]
|
|
||||||
selectBranches(updated)
|
|
||||||
}
|
|
||||||
|
|
||||||
const canProceed = selectedBranches.length >= 2
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
AI suggested {suggestedBranches.length} branches. Select, reorder, rename, or add your own.
|
|
||||||
</p>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => scaffold()}
|
|
||||||
disabled={isLoading}
|
|
||||||
className="flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
|
|
||||||
title="Generate new suggestions"
|
|
||||||
>
|
|
||||||
<RefreshCw className={cn('h-3 w-3', isLoading && 'animate-spin')} />
|
|
||||||
Regenerate
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Branch list */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
{suggestedBranches.map((branch) => {
|
|
||||||
const isSelected = selectedBranches.some((b) => b.name === branch.name)
|
|
||||||
const selectedIndex = selectedBranches.findIndex((b) => b.name === branch.name)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={branch.name}
|
|
||||||
className={cn(
|
|
||||||
'flex items-start gap-3 rounded-lg border p-3 transition-colors cursor-pointer',
|
|
||||||
isSelected
|
|
||||||
? 'border-primary/30 bg-primary/5'
|
|
||||||
: 'border-border bg-card hover:bg-accent/50'
|
|
||||||
)}
|
|
||||||
onClick={() => toggleBranch(branch)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded border',
|
|
||||||
isSelected
|
|
||||||
? 'border-primary bg-primary text-white'
|
|
||||||
: 'border-border'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{isSelected && <Check className="h-3 w-3" />}
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
{editingIndex !== null && selectedIndex === editingIndex ? (
|
|
||||||
<div className="space-y-2" onClick={(e) => e.stopPropagation()}>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={editName}
|
|
||||||
onChange={(e) => setEditName(e.target.value)}
|
|
||||||
className="w-full rounded border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none"
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={editDesc}
|
|
||||||
onChange={(e) => setEditDesc(e.target.value)}
|
|
||||||
className="w-full rounded border border-border bg-card px-2 py-1 text-xs text-muted-foreground focus:border-primary focus:outline-none"
|
|
||||||
/>
|
|
||||||
<div className="flex gap-1">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={saveEdit}
|
|
||||||
className="rounded bg-primary px-2 py-0.5 text-xs text-white"
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setEditingIndex(null)}
|
|
||||||
className="rounded border border-border px-2 py-0.5 text-xs text-muted-foreground"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div className="text-sm font-medium text-foreground">{branch.name}</div>
|
|
||||||
<div className="text-xs text-muted-foreground">{branch.description}</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{isSelected && editingIndex !== selectedIndex && (
|
|
||||||
<div className="flex items-center gap-0.5" onClick={(e) => e.stopPropagation()}>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => moveBranch(selectedIndex, 'up')}
|
|
||||||
disabled={selectedIndex === 0}
|
|
||||||
className="rounded p-1 text-muted-foreground hover:text-foreground disabled:opacity-30"
|
|
||||||
title="Move up"
|
|
||||||
>
|
|
||||||
<GripVertical className="h-3.5 w-3.5" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => startEditing(selectedIndex)}
|
|
||||||
className="rounded p-1 text-muted-foreground hover:text-foreground"
|
|
||||||
title="Edit"
|
|
||||||
>
|
|
||||||
<Pencil className="h-3.5 w-3.5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
|
|
||||||
{/* Custom branches (not in suggested) */}
|
|
||||||
{selectedBranches
|
|
||||||
.filter((b) => b.isCustom)
|
|
||||||
.map((branch, i) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={`custom-${i}`}
|
|
||||||
className="flex items-start gap-3 rounded-lg border border-primary/30 bg-primary/5 p-3"
|
|
||||||
>
|
|
||||||
<div className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded border border-primary bg-primary text-white">
|
|
||||||
<Check className="h-3 w-3" />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="text-sm font-medium text-foreground">{branch.name}</div>
|
|
||||||
<div className="text-xs text-muted-foreground">{branch.description}</div>
|
|
||||||
<span className="mt-1 inline-block rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-label text-primary">
|
|
||||||
Custom
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() =>
|
|
||||||
selectBranches(selectedBranches.filter((b) => b.name !== branch.name))
|
|
||||||
}
|
|
||||||
className="rounded p-1 text-muted-foreground hover:text-red-400"
|
|
||||||
>
|
|
||||||
<X className="h-3.5 w-3.5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Add custom branch */}
|
|
||||||
{showAddForm ? (
|
|
||||||
<div className="space-y-2 rounded-lg border border-dashed border-border p-3">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={newName}
|
|
||||||
onChange={(e) => setNewName(e.target.value)}
|
|
||||||
placeholder="Branch name"
|
|
||||||
className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none"
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={newDesc}
|
|
||||||
onChange={(e) => setNewDesc(e.target.value)}
|
|
||||||
placeholder="Brief description"
|
|
||||||
className="w-full rounded border border-border bg-card px-2 py-1.5 text-xs text-muted-foreground placeholder:text-muted-foreground/60 focus:border-primary focus:outline-none"
|
|
||||||
/>
|
|
||||||
<div className="flex gap-1">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={addCustomBranch}
|
|
||||||
disabled={!newName.trim()}
|
|
||||||
className="rounded bg-primary px-2.5 py-1 text-xs text-white disabled:opacity-50"
|
|
||||||
>
|
|
||||||
Add
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowAddForm(false)}
|
|
||||||
className="rounded border border-border px-2.5 py-1 text-xs text-muted-foreground"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowAddForm(true)}
|
|
||||||
className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4" />
|
|
||||||
Add custom branch
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Error */}
|
|
||||||
{error && (
|
|
||||||
<div className="rounded-lg border border-red-400/20 bg-red-400/5 px-3 py-2 text-sm text-red-400">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<div className="flex items-center justify-between pt-2">
|
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
{selectedBranches.length} branch{selectedBranches.length !== 1 ? 'es' : ''} selected (min 2)
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setPhase('detailing')}
|
|
||||||
disabled={!canProceed}
|
|
||||||
className={cn(
|
|
||||||
'rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
|
|
||||||
canProceed ? 'hover:opacity-90' : 'cursor-not-allowed opacity-50'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
Continue to Detail
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,163 +0,0 @@
|
|||||||
import { useState } from 'react'
|
|
||||||
import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
|
|
||||||
import { QuotaDisplay } from './QuotaDisplay'
|
|
||||||
import { cn } from '@/lib/utils'
|
|
||||||
|
|
||||||
export function FoundationForm() {
|
|
||||||
const { metadata, setMetadata, quota, start, isLoading, error } = useAIFlowBuilderStore()
|
|
||||||
const [tagInput, setTagInput] = useState('')
|
|
||||||
|
|
||||||
const canSubmit =
|
|
||||||
metadata.name.trim().length > 0 &&
|
|
||||||
metadata.description.trim().length > 0 &&
|
|
||||||
!isLoading &&
|
|
||||||
(quota?.allowed !== false)
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault()
|
|
||||||
if (!canSubmit) return
|
|
||||||
await start()
|
|
||||||
}
|
|
||||||
|
|
||||||
const addTag = () => {
|
|
||||||
const tag = tagInput.trim()
|
|
||||||
if (tag && !metadata.environment_tags.includes(tag)) {
|
|
||||||
setMetadata({ environment_tags: [...metadata.environment_tags, tag] })
|
|
||||||
}
|
|
||||||
setTagInput('')
|
|
||||||
}
|
|
||||||
|
|
||||||
const removeTag = (tag: string) => {
|
|
||||||
setMetadata({ environment_tags: metadata.environment_tags.filter((t) => t !== tag) })
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form onSubmit={handleSubmit} className="space-y-5">
|
|
||||||
{quota && <QuotaDisplay quota={quota} />}
|
|
||||||
|
|
||||||
{/* Flow Type */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-2 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
|
|
||||||
Flow Type
|
|
||||||
</label>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
{(['troubleshooting', 'procedural'] as const).map((type) => (
|
|
||||||
<button
|
|
||||||
key={type}
|
|
||||||
type="button"
|
|
||||||
onClick={() => setMetadata({ flow_type: type })}
|
|
||||||
className={cn(
|
|
||||||
'flex-1 rounded-lg border px-3 py-2.5 text-sm font-medium transition-colors',
|
|
||||||
metadata.flow_type === type
|
|
||||||
? 'border-primary/30 bg-primary/10 text-foreground'
|
|
||||||
: 'border-border bg-card text-muted-foreground hover:bg-accent'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{type === 'troubleshooting' ? 'Troubleshooting' : 'Procedural'}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Name */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-2 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
|
|
||||||
Flow Name
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={metadata.name}
|
|
||||||
onChange={(e) => setMetadata({ name: e.target.value })}
|
|
||||||
placeholder="e.g. DNS Resolution Failures"
|
|
||||||
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
|
|
||||||
maxLength={255}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Description */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-2 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
|
|
||||||
Description
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
value={metadata.description}
|
|
||||||
onChange={(e) => setMetadata({ description: e.target.value })}
|
|
||||||
placeholder="Describe what this flow covers. The more detail you provide, the better the AI suggestions will be."
|
|
||||||
rows={4}
|
|
||||||
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20 resize-none"
|
|
||||||
maxLength={2000}
|
|
||||||
/>
|
|
||||||
<p className="mt-1 text-right text-[10px] text-muted-foreground">
|
|
||||||
{metadata.description.length}/2000
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Environment Tags */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-2 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
|
|
||||||
Environment Tags <span className="normal-case tracking-normal text-muted-foreground/60">(optional)</span>
|
|
||||||
</label>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={tagInput}
|
|
||||||
onChange={(e) => setTagInput(e.target.value)}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
e.preventDefault()
|
|
||||||
addTag()
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
placeholder="e.g. Windows Server, Active Directory"
|
|
||||||
className="flex-1 rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={addTag}
|
|
||||||
className="rounded-lg border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
||||||
>
|
|
||||||
Add
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{metadata.environment_tags.length > 0 && (
|
|
||||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
|
||||||
{metadata.environment_tags.map((tag) => (
|
|
||||||
<span
|
|
||||||
key={tag}
|
|
||||||
className="inline-flex items-center gap-1 rounded-full bg-card border border-border px-2.5 py-0.5 font-label text-xs text-muted-foreground"
|
|
||||||
>
|
|
||||||
{tag}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => removeTag(tag)}
|
|
||||||
className="ml-0.5 text-muted-foreground/60 hover:text-foreground"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Error */}
|
|
||||||
{error && (
|
|
||||||
<div className="rounded-lg border border-red-400/20 bg-red-400/5 px-3 py-2 text-sm text-red-400">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Submit */}
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={!canSubmit}
|
|
||||||
className={cn(
|
|
||||||
'w-full rounded-lg bg-gradient-brand py-2.5 text-sm font-medium text-white shadow-lg shadow-primary/20',
|
|
||||||
canSubmit ? 'hover:opacity-90' : 'cursor-not-allowed opacity-50'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{isLoading ? 'Creating...' : 'Continue to AI Scaffold'}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
interface GeneratingAnimationProps {
|
|
||||||
branchContext?: { current: number; total: number }
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GeneratingAnimation({ branchContext }: GeneratingAnimationProps) {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-center gap-4 py-10">
|
|
||||||
{/* Spinner */}
|
|
||||||
<div className="h-8 w-8 animate-spin rounded-full border-2 border-border border-t-primary" />
|
|
||||||
|
|
||||||
{/* Branch context (Generate All mode) */}
|
|
||||||
{branchContext ? (
|
|
||||||
<>
|
|
||||||
<p className="text-xs font-label uppercase tracking-wide text-muted-foreground">
|
|
||||||
Branch {branchContext.current} of {branchContext.total}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-muted-foreground">Generating branch detail...</p>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<p className="text-sm text-muted-foreground">Generating...</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
import { cn } from '@/lib/utils'
|
|
||||||
import type { AIQuotaStatus } from '@/types'
|
|
||||||
|
|
||||||
interface QuotaDisplayProps {
|
|
||||||
quota: AIQuotaStatus
|
|
||||||
compact?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export function QuotaDisplay({ quota, compact = false }: QuotaDisplayProps) {
|
|
||||||
if (!quota.ai_enabled) return null
|
|
||||||
|
|
||||||
const monthlyRemaining =
|
|
||||||
quota.monthly_limit !== null
|
|
||||||
? Math.max(0, quota.monthly_limit - quota.monthly_used)
|
|
||||||
: null
|
|
||||||
|
|
||||||
const getColor = () => {
|
|
||||||
if (!quota.allowed) return 'text-red-400'
|
|
||||||
if (monthlyRemaining !== null && monthlyRemaining <= 1) return 'text-amber-400'
|
|
||||||
return 'text-green-400'
|
|
||||||
}
|
|
||||||
|
|
||||||
if (compact) {
|
|
||||||
return (
|
|
||||||
<span className={cn('text-xs font-label', getColor())}>
|
|
||||||
{monthlyRemaining !== null
|
|
||||||
? `${monthlyRemaining}/${quota.monthly_limit} builds`
|
|
||||||
: 'Unlimited'}
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2 rounded-lg border border-border bg-accent/50 px-3 py-1.5">
|
|
||||||
<div className={cn('h-2 w-2 rounded-full', getColor().replace('text-', 'bg-'))} />
|
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
{monthlyRemaining !== null ? (
|
|
||||||
<>
|
|
||||||
<span className={cn('font-medium', getColor())}>{monthlyRemaining}</span>
|
|
||||||
{' '}of {quota.monthly_limit} AI builds remaining
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
'Unlimited AI builds'
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
import { GitBranch, Layers, CheckCircle, ArrowRight, RotateCcw, Play } from 'lucide-react'
|
|
||||||
import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
|
|
||||||
import { cn } from '@/lib/utils'
|
|
||||||
|
|
||||||
interface TreePreviewCardProps {
|
|
||||||
onOpenInEditor: () => void
|
|
||||||
onStartFlow: () => void
|
|
||||||
onBuildAnother: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export function TreePreviewCard({ onOpenInEditor, onStartFlow, onBuildAnother }: TreePreviewCardProps) {
|
|
||||||
const { assembledTree, isLoading } = useAIFlowBuilderStore()
|
|
||||||
|
|
||||||
if (!assembledTree) return null
|
|
||||||
|
|
||||||
const { summary } = assembledTree
|
|
||||||
|
|
||||||
const stats = [
|
|
||||||
{ label: 'Nodes', value: summary.node_count, icon: Layers },
|
|
||||||
{ label: 'Decisions', value: summary.decision_count, icon: GitBranch },
|
|
||||||
{ label: 'Solutions', value: summary.solution_count, icon: CheckCircle },
|
|
||||||
{ label: 'Depth', value: summary.depth, icon: Layers },
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-400/10">
|
|
||||||
<CheckCircle className="h-6 w-6 text-green-400" />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-semibold text-foreground">
|
|
||||||
Tree Assembled
|
|
||||||
</h3>
|
|
||||||
<p className="mt-1 text-sm text-muted-foreground">
|
|
||||||
"{assembledTree.suggested_name}" is ready to review in the editor.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats grid */}
|
|
||||||
<div className="grid grid-cols-4 gap-2">
|
|
||||||
{stats.map(({ label, value, icon: Icon }) => (
|
|
||||||
<div
|
|
||||||
key={label}
|
|
||||||
className="flex flex-col items-center rounded-lg border border-border bg-accent/30 p-2.5"
|
|
||||||
>
|
|
||||||
<Icon className="mb-1 h-4 w-4 text-muted-foreground" />
|
|
||||||
<span className="text-lg font-semibold text-gradient-brand">{value}</span>
|
|
||||||
<span className="text-[10px] font-label uppercase tracking-wide text-muted-foreground">
|
|
||||||
{label}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Description */}
|
|
||||||
{assembledTree.suggested_description && (
|
|
||||||
<div className="rounded-lg border border-border bg-accent/20 p-3">
|
|
||||||
<p className="text-xs text-muted-foreground">{assembledTree.suggested_description}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Actions */}
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onStartFlow}
|
|
||||||
disabled={isLoading}
|
|
||||||
className={cn(
|
|
||||||
'flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-brand py-2.5 text-sm font-medium text-white shadow-lg shadow-primary/20',
|
|
||||||
'hover:opacity-90 disabled:opacity-50'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Play className="h-4 w-4" />
|
|
||||||
Start Flow
|
|
||||||
</button>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onOpenInEditor}
|
|
||||||
disabled={isLoading}
|
|
||||||
className="flex flex-1 items-center justify-center gap-2 rounded-lg border border-border py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<ArrowRight className="h-4 w-4" />
|
|
||||||
Open in Editor
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onBuildAnother}
|
|
||||||
className="flex items-center gap-2 rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
||||||
>
|
|
||||||
<RotateCcw className="h-4 w-4" />
|
|
||||||
Build Another
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,70 +0,0 @@
|
|||||||
import { Check } from 'lucide-react'
|
|
||||||
import { cn } from '@/lib/utils'
|
|
||||||
import type { AIWizardPhase } from '@/types'
|
|
||||||
|
|
||||||
const STEPS = [
|
|
||||||
{ key: 'foundation', label: 'Foundation' },
|
|
||||||
{ key: 'scaffolding', label: 'Scaffold' },
|
|
||||||
{ key: 'detailing', label: 'Detail' },
|
|
||||||
{ key: 'reviewing', label: 'Review' },
|
|
||||||
] as const
|
|
||||||
|
|
||||||
const PHASE_ORDER: Record<string, number> = {
|
|
||||||
foundation: 0,
|
|
||||||
scaffolding: 1,
|
|
||||||
generating: 1,
|
|
||||||
detailing: 2,
|
|
||||||
reviewing: 3,
|
|
||||||
completed: 4,
|
|
||||||
error: -1,
|
|
||||||
}
|
|
||||||
|
|
||||||
interface WizardStepIndicatorProps {
|
|
||||||
phase: AIWizardPhase
|
|
||||||
}
|
|
||||||
|
|
||||||
export function WizardStepIndicator({ phase }: WizardStepIndicatorProps) {
|
|
||||||
const currentIndex = PHASE_ORDER[phase] ?? 0
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-1 px-2">
|
|
||||||
{STEPS.map((step, i) => {
|
|
||||||
const isCompleted = currentIndex > i
|
|
||||||
const isCurrent = currentIndex === i
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={step.key} className="flex items-center gap-1">
|
|
||||||
{i > 0 && (
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'h-px w-4 sm:w-6',
|
|
||||||
isCompleted ? 'bg-primary' : 'bg-border'
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-medium',
|
|
||||||
isCompleted && 'bg-primary text-white',
|
|
||||||
isCurrent && 'bg-primary/20 text-primary ring-1 ring-primary/40',
|
|
||||||
!isCompleted && !isCurrent && 'bg-accent text-muted-foreground'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{isCompleted ? <Check className="h-3 w-3" /> : i + 1}
|
|
||||||
</div>
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
'hidden text-xs sm:inline',
|
|
||||||
isCurrent ? 'font-medium text-foreground' : 'text-muted-foreground'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{step.label}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,76 +0,0 @@
|
|||||||
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="border-t border-border bg-card px-4 py-3">
|
|
||||||
<div className="flex items-end gap-2">
|
|
||||||
<textarea
|
|
||||||
ref={textareaRef}
|
|
||||||
value={value}
|
|
||||||
onChange={(e) => setValue(e.target.value)}
|
|
||||||
onKeyDown={handleKeyDown}
|
|
||||||
onInput={handleInput}
|
|
||||||
placeholder={placeholder}
|
|
||||||
disabled={disabled}
|
|
||||||
rows={3}
|
|
||||||
className={cn(
|
|
||||||
'flex-1 resize-none rounded-xl border bg-card px-4 py-3',
|
|
||||||
'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'
|
|
||||||
)}
|
|
||||||
style={{ borderColor: 'var(--glass-border)' }}
|
|
||||||
/>
|
|
||||||
<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>
|
|
||||||
<p className="text-[0.625rem] text-muted-foreground mt-1.5 px-1">Shift + Enter for a new line</p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
import { Sparkles, Save, RotateCcw, Loader2 } 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
|
|
||||||
isSaving: boolean
|
|
||||||
onGenerate: () => void
|
|
||||||
onSave: () => void
|
|
||||||
onReset: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ChatToolbar({
|
|
||||||
currentPhase,
|
|
||||||
status,
|
|
||||||
isGenerating,
|
|
||||||
hasGeneratedTree,
|
|
||||||
isSaving,
|
|
||||||
onGenerate,
|
|
||||||
onSave,
|
|
||||||
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" />
|
|
||||||
Flow Assist
|
|
||||||
</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'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{isGenerating ? (
|
|
||||||
<>
|
|
||||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|
||||||
Generating...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Sparkles className="h-3.5 w-3.5" />
|
|
||||||
Generate Flow
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{hasGeneratedTree && (
|
|
||||||
<button
|
|
||||||
onClick={onSave}
|
|
||||||
disabled={isSaving}
|
|
||||||
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'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{isSaving ? (
|
|
||||||
<>
|
|
||||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|
||||||
Saving...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Save className="h-3.5 w-3.5" />
|
|
||||||
Save to Flow Library
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,112 +0,0 @@
|
|||||||
import type { ProceduralStep } from '@/types'
|
|
||||||
import { Terminal, Info, CheckSquare, AlertTriangle, LayoutList } from 'lucide-react'
|
|
||||||
import { cn } from '@/lib/utils'
|
|
||||||
|
|
||||||
interface StaticStepsPreviewProps {
|
|
||||||
steps: ProceduralStep[]
|
|
||||||
name?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const CONTENT_TYPE_ICONS: Record<string, typeof Terminal> = {
|
|
||||||
action: Terminal,
|
|
||||||
informational: Info,
|
|
||||||
verification: CheckSquare,
|
|
||||||
warning: AlertTriangle,
|
|
||||||
}
|
|
||||||
|
|
||||||
export function StaticStepsPreview({ steps, name }: StaticStepsPreviewProps) {
|
|
||||||
let stepNumber = 0
|
|
||||||
|
|
||||||
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">
|
|
||||||
{steps.filter((s) => s.type === 'procedure_step').length} steps
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 overflow-auto p-4">
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
{steps.map((step) => {
|
|
||||||
if (step.type === 'section_header') {
|
|
||||||
return (
|
|
||||||
<div key={step.id} className="pt-3 pb-1 first:pt-0">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<LayoutList className="h-3.5 w-3.5 text-primary" />
|
|
||||||
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-primary">
|
|
||||||
{step.title}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (step.type === 'procedure_end') {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={step.id}
|
|
||||||
className="mt-2 rounded-lg border border-emerald-500/20 bg-emerald-500/5 px-3 py-2"
|
|
||||||
>
|
|
||||||
<span className="text-xs font-medium text-emerald-400">
|
|
||||||
{step.title || 'Procedure Complete'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
stepNumber++
|
|
||||||
const contentType = step.content_type || 'action'
|
|
||||||
const Icon = CONTENT_TYPE_ICONS[contentType] || Terminal
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={step.id}
|
|
||||||
className={cn(
|
|
||||||
'rounded-lg border px-3 py-2 text-xs',
|
|
||||||
contentType === 'warning'
|
|
||||||
? 'border-amber-500/20 bg-amber-500/5'
|
|
||||||
: 'border-border bg-card'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="flex items-start gap-2">
|
|
||||||
<span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded bg-primary/10 font-label text-[0.5rem] text-primary">
|
|
||||||
{stepNumber}
|
|
||||||
</span>
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<Icon className={cn(
|
|
||||||
'h-3 w-3 shrink-0',
|
|
||||||
contentType === 'warning' ? 'text-amber-400' : 'text-muted-foreground'
|
|
||||||
)} />
|
|
||||||
<span className={cn(
|
|
||||||
'font-medium truncate',
|
|
||||||
contentType === 'warning' ? 'text-amber-400' : 'text-foreground'
|
|
||||||
)}>
|
|
||||||
{step.title}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{step.commands && (
|
|
||||||
<div className="mt-1 flex items-center gap-1 text-muted-foreground">
|
|
||||||
<Terminal className="h-2.5 w-2.5" />
|
|
||||||
<span className="font-label text-[0.5rem]">
|
|
||||||
{Array.isArray(step.commands) ? step.commands.length : 1} command{(Array.isArray(step.commands) ? step.commands.length : 1) !== 1 ? 's' : ''}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{step.estimated_minutes && (
|
|
||||||
<span className="shrink-0 font-label text-[0.5rem] text-muted-foreground">
|
|
||||||
~{step.estimated_minutes}m
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,80 +0,0 @@
|
|||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, BarChart3, Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText, Sparkles, BotMessageSquare, BookOpen } from 'lucide-react'
|
import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, BarChart3, Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText, BotMessageSquare, BookOpen } from 'lucide-react'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
|
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
|
||||||
import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore'
|
import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore'
|
||||||
@@ -81,7 +81,6 @@ export function Sidebar() {
|
|||||||
<NavItem href="/my-trees" icon={PenLine} label="Flow Editor" collapsed />
|
<NavItem href="/my-trees" icon={PenLine} label="Flow Editor" collapsed />
|
||||||
<NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} collapsed />
|
<NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} collapsed />
|
||||||
<NavItem href="/shares" icon={FileText} label="Exports" collapsed />
|
<NavItem href="/shares" icon={FileText} label="Exports" collapsed />
|
||||||
<NavItem href="/ai/chat" icon={Sparkles} label="Flow Assist" collapsed />
|
|
||||||
<NavItem href="/assistant" icon={BotMessageSquare} label="AI Assistant" collapsed />
|
<NavItem href="/assistant" icon={BotMessageSquare} label="AI Assistant" collapsed />
|
||||||
<NavItem href="/step-library" icon={Bookmark} label="Step Library" collapsed />
|
<NavItem href="/step-library" icon={Bookmark} label="Step Library" collapsed />
|
||||||
<NavItem href="/analytics" icon={BarChart3} label="Analytics" collapsed />
|
<NavItem href="/analytics" icon={BarChart3} label="Analytics" collapsed />
|
||||||
@@ -114,7 +113,6 @@ export function Sidebar() {
|
|||||||
<NavItem href="/my-trees" icon={PenLine} label="Flow Editor" />
|
<NavItem href="/my-trees" icon={PenLine} label="Flow Editor" />
|
||||||
<NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} />
|
<NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} />
|
||||||
<NavItem href="/shares" icon={FileText} label="Exports" />
|
<NavItem href="/shares" icon={FileText} label="Exports" />
|
||||||
<NavItem href="/ai/chat" icon={Sparkles} label="Flow Assist" />
|
|
||||||
<NavItem href="/assistant" icon={BotMessageSquare} label="AI Assistant" />
|
<NavItem href="/assistant" icon={BotMessageSquare} label="AI Assistant" />
|
||||||
<NavItem href="/step-library" icon={Bookmark} label="Step Library" />
|
<NavItem href="/step-library" icon={Bookmark} label="Step Library" />
|
||||||
<NavItem href="/analytics" icon={BarChart3} label="Analytics" />
|
<NavItem href="/analytics" icon={BarChart3} label="Analytics" />
|
||||||
|
|||||||
@@ -1,167 +0,0 @@
|
|||||||
import { useCallback, useEffect, useState } from 'react'
|
|
||||||
import { useNavigate, useSearchParams } from 'react-router-dom'
|
|
||||||
import { useAIChatStore } from '@/store/aiChatStore'
|
|
||||||
import { ChatPanel } from '@/components/ai-chat/ChatPanel'
|
|
||||||
import { ChatToolbar } from '@/components/ai-chat/ChatToolbar'
|
|
||||||
import { EmptyPreview } from '@/components/ai-chat/EmptyPreview'
|
|
||||||
import { StaticTreePreview } from '@/components/ai-chat/StaticTreePreview'
|
|
||||||
import { StaticStepsPreview } from '@/components/ai-chat/StaticStepsPreview'
|
|
||||||
import { Spinner } from '@/components/common/Spinner'
|
|
||||||
import { getTreeEditorPath } from '@/lib/routing'
|
|
||||||
import { toast } from '@/lib/toast'
|
|
||||||
import type { TreeStructure, ProceduralStep } from '@/types'
|
|
||||||
|
|
||||||
export function AIChatBuilderPage() {
|
|
||||||
const navigate = useNavigate()
|
|
||||||
const [searchParams, setSearchParams] = useSearchParams()
|
|
||||||
const flowType = searchParams.get('type') === 'procedural' ? 'procedural' : 'troubleshooting'
|
|
||||||
|
|
||||||
const {
|
|
||||||
sessionId,
|
|
||||||
status,
|
|
||||||
currentPhase,
|
|
||||||
messages,
|
|
||||||
isResponding,
|
|
||||||
workingTree,
|
|
||||||
treeMetadata,
|
|
||||||
generatedTree,
|
|
||||||
isGenerating,
|
|
||||||
error,
|
|
||||||
startSession,
|
|
||||||
sendMessage,
|
|
||||||
generateTree,
|
|
||||||
importToEditor,
|
|
||||||
abandonSession,
|
|
||||||
resumeSession,
|
|
||||||
} = useAIChatStore()
|
|
||||||
|
|
||||||
// Start or resume session on mount
|
|
||||||
useEffect(() => {
|
|
||||||
const resumeId = searchParams.get('session')
|
|
||||||
if (resumeId && !sessionId) {
|
|
||||||
resumeSession(resumeId)
|
|
||||||
} else if (!sessionId && status === 'idle') {
|
|
||||||
startSession(flowType)
|
|
||||||
}
|
|
||||||
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
|
||||||
|
|
||||||
// Store sessionId in URL for resume support
|
|
||||||
useEffect(() => {
|
|
||||||
if (sessionId && !searchParams.get('session')) {
|
|
||||||
setSearchParams((prev) => {
|
|
||||||
const next = new URLSearchParams(prev)
|
|
||||||
next.set('session', sessionId)
|
|
||||||
return next
|
|
||||||
}, { replace: true })
|
|
||||||
}
|
|
||||||
}, [sessionId, searchParams, setSearchParams])
|
|
||||||
|
|
||||||
const handleSendMessage = useCallback(
|
|
||||||
(content: string) => {
|
|
||||||
sendMessage(content)
|
|
||||||
},
|
|
||||||
[sendMessage]
|
|
||||||
)
|
|
||||||
|
|
||||||
const [isSaving, setIsSaving] = useState(false)
|
|
||||||
|
|
||||||
const handleGenerate = useCallback(() => {
|
|
||||||
generateTree()
|
|
||||||
}, [generateTree])
|
|
||||||
|
|
||||||
const handleSave = useCallback(async () => {
|
|
||||||
if (isSaving) return
|
|
||||||
setIsSaving(true)
|
|
||||||
try {
|
|
||||||
const treeId = await importToEditor({
|
|
||||||
name: treeMetadata?.name,
|
|
||||||
description: treeMetadata?.description,
|
|
||||||
tags: treeMetadata?.tags,
|
|
||||||
})
|
|
||||||
const path = getTreeEditorPath(treeId, flowType)
|
|
||||||
navigate(path)
|
|
||||||
toast.success('Flow saved to library')
|
|
||||||
} catch {
|
|
||||||
toast.error('Failed to save flow')
|
|
||||||
} finally {
|
|
||||||
setIsSaving(false)
|
|
||||||
}
|
|
||||||
}, [isSaving, importToEditor, treeMetadata, flowType, navigate])
|
|
||||||
|
|
||||||
const handleReset = useCallback(async () => {
|
|
||||||
await abandonSession()
|
|
||||||
// Clear session from URL
|
|
||||||
setSearchParams((prev) => {
|
|
||||||
const next = new URLSearchParams(prev)
|
|
||||||
next.delete('session')
|
|
||||||
return next
|
|
||||||
}, { replace: true })
|
|
||||||
startSession(flowType)
|
|
||||||
}, [abandonSession, startSession, flowType, setSearchParams])
|
|
||||||
|
|
||||||
// Show error toast
|
|
||||||
useEffect(() => {
|
|
||||||
if (error) {
|
|
||||||
toast.error(error)
|
|
||||||
}
|
|
||||||
}, [error])
|
|
||||||
|
|
||||||
if (status === 'idle' && !sessionId) {
|
|
||||||
return (
|
|
||||||
<div className="flex h-full items-center justify-center">
|
|
||||||
<Spinner />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const previewData = generatedTree || workingTree
|
|
||||||
const isProceduralPreview = previewData && 'steps' in previewData
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex h-full flex-col">
|
|
||||||
<ChatToolbar
|
|
||||||
currentPhase={currentPhase}
|
|
||||||
status={status}
|
|
||||||
isGenerating={isGenerating}
|
|
||||||
hasGeneratedTree={!!generatedTree}
|
|
||||||
isSaving={isSaving}
|
|
||||||
onGenerate={handleGenerate}
|
|
||||||
onSave={handleSave}
|
|
||||||
onReset={handleReset}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="flex flex-1 overflow-hidden">
|
|
||||||
{/* Left panel: Chat (60%) */}
|
|
||||||
<div className="flex w-3/5 flex-col border-r border-border max-lg:w-full">
|
|
||||||
<ChatPanel
|
|
||||||
messages={messages}
|
|
||||||
isResponding={isResponding}
|
|
||||||
onSendMessage={handleSendMessage}
|
|
||||||
disabled={status !== 'active'}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right panel: Preview (40%) — hidden below 1024px */}
|
|
||||||
<div className="w-2/5 overflow-hidden bg-background max-lg:hidden">
|
|
||||||
{previewData ? (
|
|
||||||
isProceduralPreview ? (
|
|
||||||
<StaticStepsPreview
|
|
||||||
steps={(previewData as { steps: ProceduralStep[] }).steps}
|
|
||||||
name={treeMetadata?.name}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<StaticTreePreview
|
|
||||||
tree={previewData as TreeStructure}
|
|
||||||
name={treeMetadata?.name}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
<EmptyPreview />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AIChatBuilderPage
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { useNavigate, Link } from 'react-router-dom'
|
import { useNavigate, Link } from 'react-router-dom'
|
||||||
import { Play, Pencil, Share2, Trash2, GitBranch, Clock, TrendingUp, FolderTree, Plus, ListOrdered, ChevronDown, Wrench, Sparkles } from 'lucide-react'
|
import { Play, Pencil, Share2, Trash2, GitBranch, Clock, TrendingUp, FolderTree, Plus, ListOrdered, ChevronDown, Wrench } from 'lucide-react'
|
||||||
import { treesApi } from '@/api/trees'
|
import { treesApi } from '@/api/trees'
|
||||||
import { sessionsApi } from '@/api/sessions'
|
import { sessionsApi } from '@/api/sessions'
|
||||||
import type { TreeListItem } from '@/types'
|
import type { TreeListItem } from '@/types'
|
||||||
@@ -12,8 +12,6 @@ import { cn } from '@/lib/utils'
|
|||||||
import { useAuthStore } from '@/store/authStore'
|
import { useAuthStore } from '@/store/authStore'
|
||||||
import { usePermissions } from '@/hooks/usePermissions'
|
import { usePermissions } from '@/hooks/usePermissions'
|
||||||
import { toast } from '@/lib/toast'
|
import { toast } from '@/lib/toast'
|
||||||
import { AIFlowBuilderModal } from '@/components/ai-builder/AIFlowBuilderModal'
|
|
||||||
import { aiBuilderApi } from '@/api/aiBuilder'
|
|
||||||
import { ForkModal } from '@/components/library/ForkModal'
|
import { ForkModal } from '@/components/library/ForkModal'
|
||||||
|
|
||||||
interface TreeWithStats extends TreeListItem {
|
interface TreeWithStats extends TreeListItem {
|
||||||
@@ -35,18 +33,12 @@ export function MyTreesPage() {
|
|||||||
const [treeToShare, setTreeToShare] = useState<TreeWithStats | null>(null)
|
const [treeToShare, setTreeToShare] = useState<TreeWithStats | null>(null)
|
||||||
const [showShareModal, setShowShareModal] = useState(false)
|
const [showShareModal, setShowShareModal] = useState(false)
|
||||||
const [showCreateMenu, setShowCreateMenu] = useState(false)
|
const [showCreateMenu, setShowCreateMenu] = useState(false)
|
||||||
const [showAIBuilder, setShowAIBuilder] = useState(false)
|
|
||||||
const [aiEnabled, setAiEnabled] = useState(false)
|
|
||||||
const [forkTarget, setForkTarget] = useState<TreeWithStats | null>(null)
|
const [forkTarget, setForkTarget] = useState<TreeWithStats | null>(null)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadMyTrees()
|
loadMyTrees()
|
||||||
}, [user?.id])
|
}, [user?.id])
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
aiBuilderApi.getQuota().then((q) => setAiEnabled(q.ai_enabled)).catch(() => {})
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const loadMyTrees = async () => {
|
const loadMyTrees = async () => {
|
||||||
if (!user?.id) return
|
if (!user?.id) return
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
@@ -178,25 +170,6 @@ export function MyTreesPage() {
|
|||||||
<div className="text-xs text-muted-foreground">Scheduled multi-target tasks</div>
|
<div className="text-xs text-muted-foreground">Scheduled multi-target tasks</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
{aiEnabled && (
|
|
||||||
<>
|
|
||||||
<div className="my-1 border-t border-border" />
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
setShowCreateMenu(false)
|
|
||||||
setShowAIBuilder(true)
|
|
||||||
}}
|
|
||||||
className="flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
|
|
||||||
>
|
|
||||||
<Sparkles className="h-4 w-4 text-primary" />
|
|
||||||
<div className="text-left">
|
|
||||||
<div className="font-medium">Flow Assist</div>
|
|
||||||
<div className="text-xs text-muted-foreground">AI-powered flow builder</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
@@ -425,11 +398,6 @@ export function MyTreesPage() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* AI Flow Builder Modal */}
|
|
||||||
<AIFlowBuilderModal
|
|
||||||
isOpen={showAIBuilder}
|
|
||||||
onClose={() => setShowAIBuilder(false)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useEffect, useState, useCallback, useMemo } from 'react'
|
import { useEffect, useState, useCallback, useMemo } from 'react'
|
||||||
import { useNavigate, useSearchParams } from 'react-router-dom'
|
import { useNavigate, useSearchParams } from 'react-router-dom'
|
||||||
import { X, RotateCcw, Play, Sparkles, FileUp } from 'lucide-react'
|
import { X, RotateCcw, Play, FileUp } from 'lucide-react'
|
||||||
import { treesApi } from '@/api/trees'
|
import { treesApi } from '@/api/trees'
|
||||||
import { categoriesApi } from '@/api/categories'
|
import { categoriesApi } from '@/api/categories'
|
||||||
import { foldersApi } from '@/api/folders'
|
import { foldersApi } from '@/api/folders'
|
||||||
@@ -283,15 +283,6 @@ export function TreeLibraryPage() {
|
|||||||
</div>
|
</div>
|
||||||
{canCreateTrees && (
|
{canCreateTrees && (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{aiEnabled && (
|
|
||||||
<button
|
|
||||||
onClick={() => navigate(typeFilter === 'procedural' || typeFilter === 'maintenance' ? `/ai/chat?type=${typeFilter}` : '/ai/chat')}
|
|
||||||
className="flex items-center gap-2 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 transition-opacity"
|
|
||||||
>
|
|
||||||
<Sparkles className="h-4 w-4" />
|
|
||||||
Flow Assist
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowImportModal(true)}
|
onClick={() => setShowImportModal(true)}
|
||||||
className="flex items-center gap-2 rounded-lg border border-border bg-[rgba(255,255,255,0.04)] px-4 py-2 text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors"
|
className="flex items-center gap-2 rounded-lg border border-border bg-[rgba(255,255,255,0.04)] px-4 py-2 text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors"
|
||||||
|
|||||||
@@ -36,7 +36,6 @@ const TeamAnalyticsPage = lazy(() => import('@/pages/TeamAnalyticsPage'))
|
|||||||
const MyAnalyticsPage = lazy(() => import('@/pages/MyAnalyticsPage'))
|
const MyAnalyticsPage = lazy(() => import('@/pages/MyAnalyticsPage'))
|
||||||
const FeedbackPage = lazy(() => import('@/pages/FeedbackPage'))
|
const FeedbackPage = lazy(() => import('@/pages/FeedbackPage'))
|
||||||
const StepLibraryPage = lazy(() => import('@/pages/StepLibraryPage'))
|
const StepLibraryPage = lazy(() => import('@/pages/StepLibraryPage'))
|
||||||
const AIChatBuilderPage = lazy(() => import('@/pages/AIChatBuilderPage'))
|
|
||||||
const AssistantChatPage = lazy(() => import('@/pages/AssistantChatPage'))
|
const AssistantChatPage = lazy(() => import('@/pages/AssistantChatPage'))
|
||||||
const GuidesHubPage = lazy(() => import('@/pages/GuidesHubPage'))
|
const GuidesHubPage = lazy(() => import('@/pages/GuidesHubPage'))
|
||||||
const GuideDetailPage = lazy(() => import('@/pages/GuideDetailPage'))
|
const GuideDetailPage = lazy(() => import('@/pages/GuideDetailPage'))
|
||||||
@@ -291,14 +290,6 @@ export const router = createBrowserRouter([
|
|||||||
</Suspense>
|
</Suspense>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'ai/chat',
|
|
||||||
element: (
|
|
||||||
<Suspense fallback={<PageLoader />}>
|
|
||||||
<AIChatBuilderPage />
|
|
||||||
</Suspense>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: 'assistant',
|
path: 'assistant',
|
||||||
element: (
|
element: (
|
||||||
|
|||||||
@@ -1,197 +0,0 @@
|
|||||||
import { create } from 'zustand'
|
|
||||||
import { AxiosError } from 'axios'
|
|
||||||
import { aiChatApi } from '@/api/aiChat'
|
|
||||||
import type {
|
|
||||||
ChatMessage,
|
|
||||||
InterviewPhase,
|
|
||||||
TreeStructure,
|
|
||||||
ProceduralStep,
|
|
||||||
} from '@/types'
|
|
||||||
|
|
||||||
interface TreeMetadata {
|
|
||||||
name?: string
|
|
||||||
description?: string
|
|
||||||
tags?: string[]
|
|
||||||
category_id?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface AIChatState {
|
|
||||||
// Session
|
|
||||||
sessionId: string | null
|
|
||||||
status: 'idle' | 'active' | 'completed' | 'abandoned'
|
|
||||||
currentPhase: InterviewPhase
|
|
||||||
flowType: 'troubleshooting' | 'procedural' | null
|
|
||||||
|
|
||||||
// Conversation
|
|
||||||
messages: ChatMessage[]
|
|
||||||
isResponding: boolean
|
|
||||||
|
|
||||||
// Progressive tree (troubleshooting = TreeStructure, procedural = {steps})
|
|
||||||
workingTree: TreeStructure | { steps: ProceduralStep[] } | null
|
|
||||||
treeMetadata: TreeMetadata | null
|
|
||||||
|
|
||||||
// Final generation
|
|
||||||
generatedTree: TreeStructure | { steps: ProceduralStep[] } | null
|
|
||||||
isGenerating: boolean
|
|
||||||
importedTreeId: string | null
|
|
||||||
|
|
||||||
// Error
|
|
||||||
error: string | null
|
|
||||||
|
|
||||||
// Actions
|
|
||||||
startSession: (flowType: 'troubleshooting' | 'procedural') => Promise<void>
|
|
||||||
sendMessage: (content: string) => Promise<void>
|
|
||||||
generateTree: () => Promise<void>
|
|
||||||
importToEditor: (params?: { name?: string; description?: string; category_id?: string; tags?: string[] }) => Promise<string>
|
|
||||||
abandonSession: () => Promise<void>
|
|
||||||
resumeSession: (sessionId: string) => Promise<void>
|
|
||||||
reset: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const initialState = {
|
|
||||||
sessionId: null,
|
|
||||||
status: 'idle' as const,
|
|
||||||
currentPhase: 'scoping' as InterviewPhase,
|
|
||||||
flowType: null,
|
|
||||||
messages: [],
|
|
||||||
isResponding: false,
|
|
||||||
workingTree: null,
|
|
||||||
treeMetadata: null,
|
|
||||||
generatedTree: null,
|
|
||||||
isGenerating: false,
|
|
||||||
importedTreeId: null,
|
|
||||||
error: null,
|
|
||||||
}
|
|
||||||
|
|
||||||
function extractErrorMessage(e: unknown, fallback: string): string {
|
|
||||||
if (e instanceof AxiosError && e.response?.data?.detail) {
|
|
||||||
const detail = e.response.data.detail
|
|
||||||
return typeof detail === 'string' ? detail : detail.message || fallback
|
|
||||||
}
|
|
||||||
if (e instanceof Error) return e.message
|
|
||||||
return fallback
|
|
||||||
}
|
|
||||||
|
|
||||||
export const useAIChatStore = create<AIChatState>((set, get) => ({
|
|
||||||
...initialState,
|
|
||||||
|
|
||||||
startSession: async (flowType) => {
|
|
||||||
set({ ...initialState, status: 'active', flowType, isResponding: true, error: null })
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await aiChatApi.startSession(flowType)
|
|
||||||
set({
|
|
||||||
sessionId: response.session_id,
|
|
||||||
currentPhase: response.current_phase,
|
|
||||||
messages: [{
|
|
||||||
role: 'assistant',
|
|
||||||
content: response.greeting,
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
}],
|
|
||||||
isResponding: false,
|
|
||||||
})
|
|
||||||
} catch (e: unknown) {
|
|
||||||
set({ error: extractErrorMessage(e, 'Failed to start session'), isResponding: false, status: 'idle' })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
sendMessage: async (content) => {
|
|
||||||
const { sessionId, messages, isResponding } = get()
|
|
||||||
if (!sessionId || isResponding) return
|
|
||||||
|
|
||||||
const userMessage: ChatMessage = {
|
|
||||||
role: 'user',
|
|
||||||
content,
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
}
|
|
||||||
|
|
||||||
set({
|
|
||||||
messages: [...messages, userMessage],
|
|
||||||
isResponding: true,
|
|
||||||
error: null,
|
|
||||||
})
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await aiChatApi.sendMessage(sessionId, content)
|
|
||||||
const aiMessage: ChatMessage = {
|
|
||||||
role: 'assistant',
|
|
||||||
content: response.content,
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
}
|
|
||||||
|
|
||||||
set((state) => ({
|
|
||||||
messages: [...state.messages, aiMessage],
|
|
||||||
currentPhase: response.current_phase,
|
|
||||||
workingTree: (response.working_tree as TreeStructure | { steps: ProceduralStep[] } | null) ?? state.workingTree,
|
|
||||||
treeMetadata: (response.tree_metadata as TreeMetadata | null) ?? state.treeMetadata,
|
|
||||||
isResponding: false,
|
|
||||||
}))
|
|
||||||
} catch (e: unknown) {
|
|
||||||
set({ error: extractErrorMessage(e, 'Failed to send message'), isResponding: false })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
generateTree: async () => {
|
|
||||||
const { sessionId, isGenerating } = get()
|
|
||||||
if (!sessionId || isGenerating) return
|
|
||||||
|
|
||||||
set({ isGenerating: true, error: null })
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await aiChatApi.generateTree(sessionId)
|
|
||||||
set({
|
|
||||||
generatedTree: response.tree_structure as unknown as TreeStructure | { steps: ProceduralStep[] },
|
|
||||||
workingTree: response.tree_structure as unknown as TreeStructure | { steps: ProceduralStep[] },
|
|
||||||
treeMetadata: response.tree_metadata as TreeMetadata,
|
|
||||||
status: 'completed',
|
|
||||||
isGenerating: false,
|
|
||||||
})
|
|
||||||
} catch (e: unknown) {
|
|
||||||
set({ error: extractErrorMessage(e, 'Failed to generate tree'), isGenerating: false })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
importToEditor: async (params) => {
|
|
||||||
const { sessionId } = get()
|
|
||||||
if (!sessionId) throw new Error('No active session')
|
|
||||||
|
|
||||||
const response = await aiChatApi.importTree(sessionId, params)
|
|
||||||
set({ importedTreeId: response.tree_id })
|
|
||||||
return response.tree_id
|
|
||||||
},
|
|
||||||
|
|
||||||
abandonSession: async () => {
|
|
||||||
const { sessionId } = get()
|
|
||||||
if (!sessionId) return
|
|
||||||
|
|
||||||
try {
|
|
||||||
await aiChatApi.abandonSession(sessionId)
|
|
||||||
} catch {
|
|
||||||
// Best effort — session may have already expired
|
|
||||||
}
|
|
||||||
set({ ...initialState })
|
|
||||||
},
|
|
||||||
|
|
||||||
resumeSession: async (sessionId) => {
|
|
||||||
set({ isResponding: true, error: null })
|
|
||||||
|
|
||||||
try {
|
|
||||||
const session = await aiChatApi.getSession(sessionId)
|
|
||||||
set({
|
|
||||||
sessionId: session.session_id,
|
|
||||||
status: session.status === 'active' ? 'active' : (session.status as 'completed' | 'abandoned'),
|
|
||||||
currentPhase: session.current_phase,
|
|
||||||
flowType: session.flow_type,
|
|
||||||
messages: session.conversation_history as ChatMessage[],
|
|
||||||
workingTree: session.working_tree as TreeStructure | { steps: ProceduralStep[] } | null,
|
|
||||||
treeMetadata: session.tree_metadata as TreeMetadata | null,
|
|
||||||
generatedTree: session.generated_tree as TreeStructure | { steps: ProceduralStep[] } | null,
|
|
||||||
isResponding: false,
|
|
||||||
})
|
|
||||||
} catch (e: unknown) {
|
|
||||||
set({ error: extractErrorMessage(e, 'Failed to resume session'), isResponding: false })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
reset: () => set({ ...initialState }),
|
|
||||||
}))
|
|
||||||
@@ -1,237 +0,0 @@
|
|||||||
import { create } from 'zustand'
|
|
||||||
import { aiBuilderApi } from '@/api/aiBuilder'
|
|
||||||
import type { AIQuotaStatus, AIBranch, AIAssembleResponse, AIWizardPhase } from '@/types'
|
|
||||||
|
|
||||||
interface AIFlowBuilderState {
|
|
||||||
// Wizard state
|
|
||||||
phase: AIWizardPhase
|
|
||||||
conversationId: string | null
|
|
||||||
metadata: {
|
|
||||||
flow_type: 'troubleshooting' | 'procedural'
|
|
||||||
name: string
|
|
||||||
description: string
|
|
||||||
environment_tags: string[]
|
|
||||||
category_id: string | null
|
|
||||||
}
|
|
||||||
|
|
||||||
// Stage 2
|
|
||||||
suggestedBranches: AIBranch[]
|
|
||||||
selectedBranches: AIBranch[]
|
|
||||||
|
|
||||||
// Stage 3
|
|
||||||
currentBranchIndex: number
|
|
||||||
|
|
||||||
// Stage 4
|
|
||||||
assembledTree: AIAssembleResponse | null
|
|
||||||
|
|
||||||
// Quota
|
|
||||||
quota: AIQuotaStatus | null
|
|
||||||
|
|
||||||
// UI state
|
|
||||||
isLoading: boolean
|
|
||||||
isGeneratingAll: boolean
|
|
||||||
stopGeneratingAll: boolean
|
|
||||||
error: string | null
|
|
||||||
|
|
||||||
// Actions
|
|
||||||
loadQuota: () => Promise<void>
|
|
||||||
setMetadata: (metadata: Partial<AIFlowBuilderState['metadata']>) => void
|
|
||||||
start: () => Promise<void>
|
|
||||||
scaffold: () => Promise<void>
|
|
||||||
selectBranches: (branches: AIBranch[]) => void
|
|
||||||
generateBranchDetail: (branchName: string) => Promise<void>
|
|
||||||
assemble: () => Promise<void>
|
|
||||||
generateAllBranchDetails: () => Promise<void>
|
|
||||||
cancelGenerateAll: () => void
|
|
||||||
reset: () => void
|
|
||||||
setPhase: (phase: AIWizardPhase) => void
|
|
||||||
setError: (error: string | null) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const initialMetadata = {
|
|
||||||
flow_type: 'troubleshooting' as const,
|
|
||||||
name: '',
|
|
||||||
description: '',
|
|
||||||
environment_tags: [] as string[],
|
|
||||||
category_id: null as string | null,
|
|
||||||
}
|
|
||||||
|
|
||||||
export const useAIFlowBuilderStore = create<AIFlowBuilderState>()((set, get) => ({
|
|
||||||
phase: 'foundation',
|
|
||||||
conversationId: null,
|
|
||||||
metadata: { ...initialMetadata },
|
|
||||||
suggestedBranches: [],
|
|
||||||
selectedBranches: [],
|
|
||||||
currentBranchIndex: 0,
|
|
||||||
assembledTree: null,
|
|
||||||
quota: null,
|
|
||||||
isLoading: false,
|
|
||||||
isGeneratingAll: false,
|
|
||||||
stopGeneratingAll: false,
|
|
||||||
error: null,
|
|
||||||
|
|
||||||
loadQuota: async () => {
|
|
||||||
try {
|
|
||||||
const quota = await aiBuilderApi.getQuota()
|
|
||||||
set({ quota })
|
|
||||||
} catch {
|
|
||||||
// Silently fail — quota display is optional
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
setMetadata: (metadata) => {
|
|
||||||
set((state) => ({
|
|
||||||
metadata: { ...state.metadata, ...metadata },
|
|
||||||
}))
|
|
||||||
},
|
|
||||||
|
|
||||||
start: async () => {
|
|
||||||
const { metadata } = get()
|
|
||||||
set({ isLoading: true, error: null })
|
|
||||||
try {
|
|
||||||
const response = await aiBuilderApi.start({
|
|
||||||
flow_type: metadata.flow_type,
|
|
||||||
name: metadata.name,
|
|
||||||
description: metadata.description,
|
|
||||||
environment_tags: metadata.environment_tags,
|
|
||||||
category_id: metadata.category_id ?? undefined,
|
|
||||||
})
|
|
||||||
set({
|
|
||||||
conversationId: response.conversation_id,
|
|
||||||
phase: 'scaffolding',
|
|
||||||
isLoading: false,
|
|
||||||
})
|
|
||||||
} catch (err) {
|
|
||||||
const message = _extractError(err)
|
|
||||||
set({ error: message, isLoading: false })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
scaffold: async () => {
|
|
||||||
const { conversationId } = get()
|
|
||||||
if (!conversationId) return
|
|
||||||
set({ isLoading: true, error: null, phase: 'generating' })
|
|
||||||
try {
|
|
||||||
const response = await aiBuilderApi.scaffold(conversationId)
|
|
||||||
const branches: AIBranch[] = response.branches.map((b) => ({
|
|
||||||
name: b.name,
|
|
||||||
description: b.description,
|
|
||||||
}))
|
|
||||||
set({
|
|
||||||
suggestedBranches: branches,
|
|
||||||
selectedBranches: branches,
|
|
||||||
phase: 'scaffolding',
|
|
||||||
isLoading: false,
|
|
||||||
})
|
|
||||||
} catch (err) {
|
|
||||||
const message = _extractError(err)
|
|
||||||
set({ error: message, phase: 'error', isLoading: false })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
selectBranches: (branches) => {
|
|
||||||
set({ selectedBranches: branches })
|
|
||||||
},
|
|
||||||
|
|
||||||
generateBranchDetail: async (branchName) => {
|
|
||||||
const { conversationId, selectedBranches } = get()
|
|
||||||
if (!conversationId) return
|
|
||||||
set({ isLoading: true, error: null, phase: 'generating' })
|
|
||||||
try {
|
|
||||||
const response = await aiBuilderApi.branchDetail(conversationId, branchName)
|
|
||||||
const updatedBranches = selectedBranches.map((b) =>
|
|
||||||
b.name === branchName ? { ...b, steps: response.steps } : b
|
|
||||||
)
|
|
||||||
// Advance to the next branch that still needs detail
|
|
||||||
const nextIndex = updatedBranches.findIndex((b) => !b.steps)
|
|
||||||
const currentBranchIndex = nextIndex !== -1 ? nextIndex : updatedBranches.findIndex((b) => b.name === branchName)
|
|
||||||
set({
|
|
||||||
selectedBranches: updatedBranches,
|
|
||||||
currentBranchIndex,
|
|
||||||
phase: 'detailing',
|
|
||||||
isLoading: false,
|
|
||||||
})
|
|
||||||
} catch (err) {
|
|
||||||
const message = _extractError(err)
|
|
||||||
set({ error: message, phase: 'error', isLoading: false })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
assemble: async () => {
|
|
||||||
const { conversationId, selectedBranches } = get()
|
|
||||||
if (!conversationId) return
|
|
||||||
set({ isLoading: true, error: null })
|
|
||||||
try {
|
|
||||||
const response = await aiBuilderApi.assemble(
|
|
||||||
conversationId,
|
|
||||||
selectedBranches.map((b) => ({
|
|
||||||
name: b.name,
|
|
||||||
description: b.description,
|
|
||||||
steps: b.steps,
|
|
||||||
}))
|
|
||||||
)
|
|
||||||
set({
|
|
||||||
assembledTree: response,
|
|
||||||
phase: 'reviewing',
|
|
||||||
isLoading: false,
|
|
||||||
})
|
|
||||||
} catch (err) {
|
|
||||||
const message = _extractError(err)
|
|
||||||
set({ error: message, phase: 'error', isLoading: false })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
generateAllBranchDetails: async () => {
|
|
||||||
const { selectedBranches, generateBranchDetail } = get()
|
|
||||||
const undetailed = selectedBranches.filter((b) => !b.steps)
|
|
||||||
if (undetailed.length === 0) return
|
|
||||||
|
|
||||||
set({ isGeneratingAll: true, stopGeneratingAll: false, error: null })
|
|
||||||
|
|
||||||
for (const branch of undetailed) {
|
|
||||||
if (get().stopGeneratingAll) break
|
|
||||||
// Set currentBranchIndex so tabs show the active branch
|
|
||||||
const idx = get().selectedBranches.findIndex((b) => b.name === branch.name)
|
|
||||||
if (idx !== -1) set({ currentBranchIndex: idx })
|
|
||||||
await generateBranchDetail(branch.name)
|
|
||||||
// If generateBranchDetail set phase to 'error', stop
|
|
||||||
if (get().phase === 'error') break
|
|
||||||
}
|
|
||||||
|
|
||||||
set({ isGeneratingAll: false })
|
|
||||||
},
|
|
||||||
|
|
||||||
cancelGenerateAll: () => {
|
|
||||||
set({ stopGeneratingAll: true })
|
|
||||||
},
|
|
||||||
|
|
||||||
reset: () => {
|
|
||||||
set({
|
|
||||||
phase: 'foundation',
|
|
||||||
conversationId: null,
|
|
||||||
metadata: { ...initialMetadata },
|
|
||||||
suggestedBranches: [],
|
|
||||||
selectedBranches: [],
|
|
||||||
currentBranchIndex: 0,
|
|
||||||
assembledTree: null,
|
|
||||||
isLoading: false,
|
|
||||||
isGeneratingAll: false,
|
|
||||||
stopGeneratingAll: false,
|
|
||||||
error: null,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
setPhase: (phase) => set({ phase }),
|
|
||||||
setError: (error) => set({ error }),
|
|
||||||
}))
|
|
||||||
|
|
||||||
function _extractError(err: unknown): string {
|
|
||||||
if (err && typeof err === 'object' && 'response' in err) {
|
|
||||||
const axiosErr = err as { response?: { data?: { detail?: string | { message?: string } } } }
|
|
||||||
const detail = axiosErr.response?.data?.detail
|
|
||||||
if (typeof detail === 'string') return detail
|
|
||||||
if (detail && typeof detail === 'object' && 'message' in detail) return detail.message ?? 'Unknown error'
|
|
||||||
}
|
|
||||||
if (err instanceof Error) return err.message
|
|
||||||
return 'An unexpected error occurred'
|
|
||||||
}
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
export type InterviewPhase = 'scoping' | 'discovery' | 'enrichment' | 'review' | 'generation'
|
|
||||||
|
|
||||||
export interface ChatMessage {
|
|
||||||
role: 'user' | 'assistant'
|
|
||||||
content: string
|
|
||||||
timestamp: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface AIChatStartResponse {
|
|
||||||
session_id: string
|
|
||||||
greeting: string
|
|
||||||
current_phase: InterviewPhase
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface AIChatMessageResponse {
|
|
||||||
content: string
|
|
||||||
current_phase: InterviewPhase
|
|
||||||
working_tree: Record<string, unknown> | null
|
|
||||||
tree_metadata: Record<string, unknown> | null
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface AIChatSessionResponse {
|
|
||||||
session_id: string
|
|
||||||
status: 'active' | 'completed' | 'abandoned'
|
|
||||||
current_phase: InterviewPhase
|
|
||||||
flow_type: 'troubleshooting' | 'procedural'
|
|
||||||
conversation_history: ChatMessage[]
|
|
||||||
working_tree: Record<string, unknown> | null
|
|
||||||
tree_metadata: Record<string, unknown> | null
|
|
||||||
message_count: number
|
|
||||||
generated_tree: Record<string, unknown> | null
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface AIChatGenerateResponse {
|
|
||||||
tree_structure: Record<string, unknown>
|
|
||||||
tree_metadata: Record<string, unknown>
|
|
||||||
status: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface AIChatImportResponse {
|
|
||||||
tree_id: string
|
|
||||||
tree_type: string
|
|
||||||
}
|
|
||||||
@@ -55,15 +55,6 @@ export type {
|
|||||||
AIFixValidationError,
|
AIFixValidationError,
|
||||||
} from './ai-fix'
|
} from './ai-fix'
|
||||||
|
|
||||||
export type {
|
|
||||||
InterviewPhase,
|
|
||||||
ChatMessage,
|
|
||||||
AIChatStartResponse,
|
|
||||||
AIChatMessageResponse,
|
|
||||||
AIChatSessionResponse,
|
|
||||||
AIChatGenerateResponse,
|
|
||||||
AIChatImportResponse,
|
|
||||||
} from './ai-chat'
|
|
||||||
|
|
||||||
export type {
|
export type {
|
||||||
RFFlowFile,
|
RFFlowFile,
|
||||||
|
|||||||
Reference in New Issue
Block a user