@octo-cyber/workflow 0.5.0

package/web/components/ChatPanel.tsx

@@ -0,0 +1,344 @@
+'use client'
+
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import {
+  Send,
+  Sparkles,
+  Copy,
+  Download,
+  Loader2,
+  User,
+  Play,
+  GitCompare,
+} from 'lucide-react'
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Textarea } from '@octo-cyber/ui/components/ui/textarea'
+import { Card, CardContent } from '@octo-cyber/ui/components/ui/card'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import {
+  workflowAiService,
+  type WorkflowDesignResponse,
+  type ConversationMessage,
+} from '../services/workflow-ai-service'
+
+export interface ChatMessage {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+  workflowJson?: string
+  suggestions?: string[]
+  durationMs?: number
+}
+
+interface ChatPanelProps {
+  sessionId: number | null
+  currentWorkflowJson: string | null
+  selectedTool: string
+  selectedModel: string
+  contextDocs: string[]
+  onWorkflowGenerated: (workflowJson?: string) => void
+  onApply: (json: string) => void
+  className?: string
+}
+
+function generateId(): string {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+}
+
+export function ChatPanel({
+  sessionId,
+  currentWorkflowJson,
+  selectedTool,
+  selectedModel,
+  contextDocs,
+  onWorkflowGenerated,
+  onApply,
+  className,
+}: ChatPanelProps) {
+  const t = useTranslations('workflows.aiDesign')
+  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [input, setInput] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [])
+
+  useEffect(() => { scrollToBottom() }, [messages, scrollToBottom])
+
+  // Reset messages when session changes
+  useEffect(() => { setMessages([]) }, [sessionId])
+
+  const lastWorkflowJson = messages
+    .filter((m) => m.role === 'assistant' && m.workflowJson)
+    .at(-1)?.workflowJson
+
+  async function handleSubmit() {
+    const prompt = input.trim()
+    if (!prompt || isLoading) return
+
+    const userMsg: ChatMessage = { id: generateId(), role: 'user', content: prompt }
+    setMessages((prev) => [...prev, userMsg])
+    setInput('')
+    setIsLoading(true)
+
+    try {
+      // Build conversation history
+      const conversationHistory: ConversationMessage[] = messages.map((m) => ({
+        role: m.role,
+        content: m.role === 'assistant' && m.workflowJson
+          ? `${m.content}\n\nGenerated workflow JSON:\n${m.workflowJson}`
+          : m.content,
+      }))
+
+      // Build context from selected docs
+      let context: string | undefined
+      if (contextDocs.length > 0) {
+        const docContents = await Promise.all(
+          contextDocs.map((moduleId) =>
+            workflowAiService.getApiDocContent(moduleId).catch(() => ''),
+          ),
+        )
+        context = docContents.filter(Boolean).join('\n\n---\n\n')
+      }
+
+      const res: WorkflowDesignResponse = await workflowAiService.design({
+        prompt,
+        currentWorkflowJson: lastWorkflowJson ?? currentWorkflowJson ?? undefined,
+        context,
+        tool: selectedTool,
+        model: selectedModel || undefined,
+        conversationHistory: conversationHistory.length > 0 ? conversationHistory : undefined,
+        sessionId: sessionId ?? undefined,
+      })
+
+      const assistantMsg: ChatMessage = {
+        id: generateId(),
+        role: 'assistant',
+        content: res.data?.explanation ?? res.error ?? t('unknownError'),
+        workflowJson: res.data?.workflowJson
+          ? (typeof res.data.workflowJson === 'string'
+            ? res.data.workflowJson
+            : JSON.stringify(res.data.workflowJson, null, 2))
+          : undefined,
+        suggestions: res.data?.suggestions,
+        durationMs: res.data?.durationMs,
+      }
+      setMessages((prev) => [...prev, assistantMsg])
+
+      if (res.success) {
+        onWorkflowGenerated(assistantMsg.workflowJson)
+      } else {
+        toast.error(res.error ?? t('requestFailed'))
+      }
+    } catch {
+      toast.error(t('requestFailed'))
+      setMessages((prev) => [
+        ...prev,
+        { id: generateId(), role: 'assistant', content: t('requestFailed') },
+      ])
+    } finally {
+      setIsLoading(false)
+      textareaRef.current?.focus()
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSubmit()
+    }
+  }
+
+  return (
+    <div className={`flex flex-col ${className ?? ''}`}>
+      {/* Messages area */}
+      <div className="flex-1 overflow-y-auto px-4 py-4">
+        {messages.length === 0 ? (
+          <EmptyState t={t} />
+        ) : (
+          <div className="mx-auto max-w-3xl space-y-6">
+            {messages.map((msg) =>
+              msg.role === 'user' ? (
+                <UserMessage key={msg.id} msg={msg} />
+              ) : (
+                <AssistantMessage
+                  key={msg.id}
+                  msg={msg}
+                  t={t}
+                  onApply={onApply}
+                />
+              ),
+            )}
+            {isLoading && <ThinkingIndicator t={t} />}
+            <div ref={messagesEndRef} />
+          </div>
+        )}
+      </div>
+
+      {/* Input area */}
+      <div className="border-t border-border bg-background px-4 py-3">
+        <div className="mx-auto flex max-w-3xl gap-2">
+          <Textarea
+            ref={textareaRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={t('inputPlaceholder')}
+            disabled={isLoading}
+            className="min-h-[44px] max-h-32 resize-none"
+            rows={1}
+          />
+          <Button
+            onClick={handleSubmit}
+            disabled={!input.trim() || isLoading}
+            size="icon"
+            className="h-11 w-11 shrink-0"
+          >
+            {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ─── Sub-components ──────────────────────────────────────────
+
+function EmptyState({ t }: { t: (key: string) => string }) {
+  return (
+    <div className="flex h-full items-center justify-center">
+      <Card className="max-w-md border-dashed">
+        <CardContent className="flex flex-col items-center gap-3 py-8 text-center">
+          <Sparkles className="h-10 w-10 text-primary/60" />
+          <p className="text-sm text-muted-foreground">{t('placeholder')}</p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+function UserMessage({ msg }: { msg: ChatMessage }) {
+  return (
+    <div className="flex justify-end gap-3">
+      <div className="max-w-[80%] rounded-lg bg-primary px-4 py-2.5 text-primary-foreground">
+        <p className="whitespace-pre-wrap text-sm">{msg.content}</p>
+      </div>
+      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted">
+        <User className="h-4 w-4" />
+      </div>
+    </div>
+  )
+}
+
+function AssistantMessage({
+  msg,
+  t,
+  onApply,
+}: {
+  msg: ChatMessage
+  t: (key: string) => string
+  onApply: (json: string) => void
+}) {
+  return (
+    <div className="flex gap-3">
+      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
+        <Sparkles className="h-4 w-4" />
+      </div>
+      <div className="min-w-0 flex-1 space-y-2">
+        <p className="whitespace-pre-wrap text-sm leading-relaxed">{msg.content}</p>
+        {msg.workflowJson && (
+          <JsonPreview json={msg.workflowJson} t={t} onApply={onApply} />
+        )}
+        {msg.suggestions && msg.suggestions.length > 0 && (
+          <div className="mt-2 flex flex-wrap gap-1.5">
+            {msg.suggestions.map((s, i) => (
+              <Badge key={i} variant="secondary" className="text-xs">{s}</Badge>
+            ))}
+          </div>
+        )}
+        {msg.durationMs != null && (
+          <p className="text-xs text-muted-foreground">
+            {t('generatedIn')} {(msg.durationMs / 1000).toFixed(1)}s
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function JsonPreview({
+  json,
+  t,
+  onApply,
+}: {
+  json: string
+  t: (key: string) => string
+  onApply: (json: string) => void
+}) {
+  let formatted = json
+  try { formatted = JSON.stringify(JSON.parse(json), null, 2) } catch { /* use raw */ }
+
+  return (
+    <div className="mt-3 rounded-md border border-border bg-muted/50 dark:bg-zinc-900/50">
+      <div className="flex items-center justify-between border-b border-border px-3 py-2">
+        <span className="text-xs font-medium text-muted-foreground">{t('jsonPreview')}</span>
+        <div className="flex gap-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-xs"
+            onClick={() => onApply(formatted)}
+          >
+            <Play className="mr-1 h-3 w-3" />
+            {t('apply')}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2"
+            onClick={() => {
+              navigator.clipboard.writeText(formatted).then(() => toast.success(t('copied')))
+            }}
+          >
+            <Copy className="h-3.5 w-3.5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2"
+            onClick={() => {
+              const blob = new Blob([formatted], { type: 'application/json' })
+              const url = URL.createObjectURL(blob)
+              const a = document.createElement('a')
+              a.href = url
+              a.download = `workflow-${Date.now()}.json`
+              a.click()
+              URL.revokeObjectURL(url)
+            }}
+          >
+            <Download className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      </div>
+      <pre className="max-h-64 overflow-auto p-3 text-xs leading-relaxed">
+        <code>{formatted}</code>
+      </pre>
+    </div>
+  )
+}
+
+function ThinkingIndicator({ t }: { t: (key: string) => string }) {
+  return (
+    <div className="flex gap-3">
+      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
+        <Loader2 className="h-4 w-4 animate-spin" />
+      </div>
+      <p className="text-sm text-muted-foreground">{t('thinking')}</p>
+    </div>
+  )
+}

package/web/components/N8nIframe.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { Loader2, AlertCircle, ServerOff, LogIn, WifiOff } from 'lucide-react'
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { useN8nSession, type N8nErrorType } from '../hooks/use-n8n-session'
+
+const errorIcons: Record<N8nErrorType, typeof AlertCircle> = {
+  auth: LogIn,
+  unavailable: ServerOff,
+  network: WifiOff,
+  unknown: AlertCircle,
+}
+
+/** CSS injected into the n8n iframe to fix layout issues */
+const N8N_HEIGHT_CSS = `
+html, body { height: 100% !important; }
+#app { height: 100% !important; }
+.app-grid { height: 100% !important; }
+`
+
+interface N8nIframeProps {
+  /** n8n sub-path, e.g. "" for home, "credentials", "executions" */
+  subPath?: string
+}
+
+export function N8nIframe({ subPath = '' }: N8nIframeProps) {
+  const t = useTranslations('workflows')
+  const tc = useTranslations('common')
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const { ensureSession, isReady, error } = useN8nSession()
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    ensureSession().finally(() => setIsLoading(false))
+  }, [ensureSession])
+
+  const handleIframeLoad = useCallback(() => {
+    const iframe = iframeRef.current
+    if (!iframe) return
+    try {
+      const doc = iframe.contentDocument
+      if (!doc) return
+      let style = doc.querySelector('#octo-height-fix') as HTMLStyleElement | null
+      if (!style) {
+        style = doc.createElement('style')
+        style.id = 'octo-height-fix'
+        doc.head.appendChild(style)
+      }
+      style.textContent = N8N_HEIGHT_CSS
+    } catch {
+      // Cross-origin restriction — CSS injection via proxy should handle this
+    }
+  }, [])
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-3">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">{t('loading')}</p>
+      </div>
+    )
+  }
+
+  if (error) {
+    const Icon = errorIcons[error.type]
+
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-4">
+        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+          <Icon className="h-8 w-8 text-muted-foreground" />
+        </div>
+        <div className="text-center">
+          <h3 className="text-lg font-semibold">{t(`errors.${error.type}.title`)}</h3>
+          <p className="mt-1 max-w-sm text-sm text-muted-foreground">
+            {t(error.messageKey, error.messageParams)}
+          </p>
+        </div>
+        {error.type === 'unavailable' && (
+          <div className="max-w-sm rounded-md border bg-muted/50 p-3 text-xs text-muted-foreground">
+            <p className="font-medium">{t('errors.unavailable.troubleshootTitle')}</p>
+            <ol className="mt-1 list-inside list-decimal space-y-1">
+              <li>{t('errors.unavailable.step1')}</li>
+              <li>{t('errors.unavailable.step2')}</li>
+              <li>{t('errors.unavailable.step3')}</li>
+            </ol>
+          </div>
+        )}
+        <Button
+          onClick={() => {
+            setIsLoading(true)
+            ensureSession().finally(() => setIsLoading(false))
+          }}
+        >
+          {tc('retry')}
+        </Button>
+      </div>
+    )
+  }
+
+  if (!isReady) {
+    return null
+  }
+
+  const src = subPath ? `/n8n/${subPath}` : '/n8n/'
+
+  return (
+    <div className="-mx-4 -mt-4 -mb-20 md:-mb-4 h-svh w-[calc(100%+2rem)]">
+      <iframe
+        ref={iframeRef}
+        src={src}
+        className="h-full w-full border-0"
+        allow="clipboard-read; clipboard-write"
+        onLoad={handleIframeLoad}
+      />
+    </div>
+  )
+}