@genui/a3-create 0.1.36

package/template/app/components/organisms/AguiChat.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import { useState, useCallback, useRef, useMemo } from 'react'
+import { ChatMessageList } from '@organisms/ChatMessageList'
+import { ChatContainer, ChatHeader } from '@atoms'
+import { ChatInput } from '@molecules'
+import { MessageSender } from '@genui/a3'
+import type { Message } from '@genui/a3'
+import { HttpAgent, EventType } from '@ag-ui/client'
+import { CHAT_ERROR, CHAT_ERROR_SHORT } from '@constants/ui'
+import { useRestart, type RestartResult } from '@lib/hooks/useRestart'
+
+interface AguiChatProps {
+  sessionId: string
+  initialMessages?: Message[]
+  onSessionUpdate?: (update: { activeAgentId: string | null; state: Record<string, unknown> }) => void
+  onRestart?: () => Promise<RestartResult>
+}
+
+export function AguiChat({ sessionId, initialMessages, onSessionUpdate, onRestart }: AguiChatProps) {
+  const agent = useMemo(() => new HttpAgent({ url: '/api/agui', threadId: sessionId }), [sessionId])
+  const [messages, setMessages] = useState<Message[]>(initialMessages ?? [])
+  const [isLoading, setIsLoading] = useState(false)
+  const assistantIdRef = useRef<string>('')
+  const { isRestarting, handleRestart } = useRestart({ onRestart, setMessages, onSessionUpdate })
+
+  const handleSubmit = useCallback(
+    async (text: string) => {
+      const userMsg: Message = {
+        messageId: crypto.randomUUID(),
+        text,
+        metadata: { source: MessageSender.USER },
+      }
+      setMessages((prev) => [...prev, userMsg])
+      setIsLoading(true)
+
+      let assistantId = crypto.randomUUID()
+      assistantIdRef.current = assistantId
+
+      const streamingMsg: Message = {
+        messageId: assistantId,
+        text: '',
+        metadata: { source: MessageSender.ASSISTANT },
+        isStreaming: true,
+      }
+      setMessages((prev) => [...prev, streamingMsg])
+
+      try {
+        const runId = crypto.randomUUID()
+
+        // Add the user message to the agent's internal state BEFORE running.
+        agent.addMessage({ id: crypto.randomUUID(), role: 'user', content: text })
+
+        await agent.runAgent(
+          {
+            runId,
+            tools: [],
+            context: [],
+            forwardedProps: {},
+          },
+          {
+            onEvent({ event }) {
+              if (event.type === EventType.TEXT_MESSAGE_CONTENT && 'delta' in event) {
+                const delta = (event as unknown as { delta: string }).delta
+                setMessages((prev) =>
+                  prev.map((m) => (m.messageId === assistantId ? { ...m, text: m.text + delta } : m)),
+                )
+              } else if (event.type === EventType.CUSTOM && 'name' in event) {
+                const customEvent = event as unknown as {
+                  name: string
+                  value?: { toAgentId?: string; state?: Record<string, unknown> }
+                }
+                if (customEvent.name === 'AgentTransition') {
+                  onSessionUpdate?.({
+                    activeAgentId: customEvent.value?.toAgentId ?? null,
+                    state: customEvent.value?.state ?? {},
+                  })
+                  const prevAssistantId = assistantId
+                  assistantId = crypto.randomUUID()
+                  assistantIdRef.current = assistantId
+                  setMessages((prev) => {
+                    const updated = prev.map((m) =>
+                      m.messageId === prevAssistantId ? { ...m, isStreaming: false } : m,
+                    )
+                    return [
+                      ...updated,
+                      {
+                        messageId: assistantId,
+                        text: '',
+                        metadata: { source: MessageSender.ASSISTANT },
+                        isStreaming: true,
+                      },
+                    ]
+                  })
+                }
+              } else if (event.type === EventType.RUN_FINISHED) {
+                const result = (event as unknown as { result?: Record<string, unknown> }).result
+                onSessionUpdate?.({
+                  activeAgentId: (result?.activeAgentId as string) ?? null,
+                  state: (result?.state as Record<string, unknown>) ?? {},
+                })
+                setMessages((prev) => prev.map((m) => (m.messageId === assistantId ? { ...m, isStreaming: false } : m)))
+              } else if (event.type === EventType.RUN_ERROR) {
+                setMessages((prev) =>
+                  prev.map((m) =>
+                    m.messageId === assistantId ? { ...m, text: m.text || CHAT_ERROR_SHORT, isStreaming: false } : m,
+                  ),
+                )
+              }
+            },
+          },
+        )
+      } catch (error) {
+        console.error('AG-UI chat error:', error)
+        setMessages((prev) =>
+          prev.map((m) => (m.messageId === assistantId ? { ...m, text: m.text || CHAT_ERROR, isStreaming: false } : m)),
+        )
+      } finally {
+        setIsLoading(false)
+        setMessages((prev) => prev.map((m) => (m.messageId === assistantId ? { ...m, isStreaming: false } : m)))
+      }
+    },
+    [agent, onSessionUpdate],
+  )
+
+  return (
+    <ChatContainer elevation={0}>
+      <ChatHeader onRestart={() => void handleRestart?.()} isRestarting={isRestarting} />
+      <ChatMessageList messages={messages} />
+      <ChatInput onSubmit={(text) => void handleSubmit(text)} disabled={isLoading || isRestarting} />
+    </ChatContainer>
+  )
+}

package/template/app/components/organisms/Chat.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { CircularProgress } from '@mui/material'
+import { ChatMessageList } from '@organisms/ChatMessageList'
+import { ChatContainer, ChatHeader } from '@atoms'
+import { ChatInput } from '@molecules'
+import { MessageSender } from '@genui/a3'
+import type { Message } from '@genui/a3'
+import { CHAT_ERROR } from '@constants/ui'
+import { useRestart, type RestartResult } from '@lib/hooks/useRestart'
+
+type ChatApiResponse = {
+  response: string
+  activeAgentId: string | null
+  nextAgentId: string | null
+  state: Record<string, unknown>
+  goalAchieved: boolean
+}
+
+interface ChatProps {
+  sessionId: string
+  initialMessages?: Message[]
+  onSessionUpdate?: (update: { activeAgentId: string | null; state: Record<string, unknown> }) => void
+  onRestart?: () => Promise<RestartResult>
+}
+
+export function Chat({ sessionId, initialMessages, onSessionUpdate, onRestart }: ChatProps) {
+  const [messages, setMessages] = useState<Message[]>(initialMessages ?? [])
+  const [isLoading, setIsLoading] = useState(false)
+  const { isRestarting, handleRestart } = useRestart({ onRestart, setMessages, onSessionUpdate })
+
+  const handleSubmit = useCallback(
+    async (text: string) => {
+      const userMsg: Message = {
+        messageId: crypto.randomUUID(),
+        text,
+        metadata: { source: MessageSender.USER },
+      }
+      setMessages((prev) => [...prev, userMsg])
+      setIsLoading(true)
+
+      try {
+        const response = await fetch('/api/chat', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ message: text, sessionId }),
+        })
+
+        if (!response.ok) {
+          throw new Error(`HTTP error: ${response.status}`)
+        }
+
+        const data = (await response.json()) as ChatApiResponse
+
+        onSessionUpdate?.({ activeAgentId: data.activeAgentId, state: data.state })
+
+        const assistantMsg: Message = {
+          messageId: crypto.randomUUID(),
+          text: data.response,
+          metadata: { source: MessageSender.ASSISTANT },
+        }
+        setMessages((prev) => [...prev, assistantMsg])
+      } catch (error) {
+        console.error('Chat API error:', error)
+        const errorMsg: Message = {
+          messageId: crypto.randomUUID(),
+          text: CHAT_ERROR,
+          metadata: { source: MessageSender.ASSISTANT },
+        }
+        setMessages((prev) => [...prev, errorMsg])
+      } finally {
+        setIsLoading(false)
+      }
+    },
+    [onSessionUpdate, sessionId],
+  )
+
+  return (
+    <ChatContainer elevation={0}>
+      <ChatHeader onRestart={() => void handleRestart?.()} isRestarting={isRestarting}>
+        {isLoading && <CircularProgress size={16} />}
+      </ChatHeader>
+      <ChatMessageList messages={messages} />
+      <ChatInput onSubmit={handleSubmit} disabled={isLoading || isRestarting} />
+    </ChatContainer>
+  )
+}

package/template/app/components/organisms/ChatMessageList.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { useRef, useEffect } from 'react'
+import styled from 'styled-components'
+import { Box } from '@mui/material'
+import type { Theme } from '@mui/material/styles'
+import { ChatMessage } from '@molecules'
+import type { Message } from '@genui/a3'
+
+const MessageListContainer = styled(Box)`
+  flex: 1;
+  overflow-y: auto;
+  padding: ${({ theme }) => (theme as Theme).spacing(2)};
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => (theme as Theme).spacing(1.5)};
+`
+
+export function ChatMessageList({ messages }: { messages: Message[] }) {
+  const bottomRef = useRef<HTMLDivElement>(null)
+  const lastMessage = messages[messages.length - 1]
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages.length, lastMessage?.text])
+
+  return (
+    <MessageListContainer>
+      {messages.map((m) => (
+        <ChatMessage key={m.messageId} message={m} />
+      ))}
+      <div ref={bottomRef} />
+    </MessageListContainer>
+  )
+}

package/template/app/components/organisms/ExamplePageLayout.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { Box, Typography } from '@mui/material'
+import { AgentGraph } from './AgentGraph'
+import { Chat } from './Chat'
+import { AguiChat } from './AguiChat'
+import { StreamChat } from './StreamChat'
+import { StateViewer } from './StateViewer'
+import { restartSession } from '@lib/actions/restartSession'
+import type { AgentInfo } from '@lib/getAgentGraphData'
+import type { Message } from '@genui/a3'
+
+type ExampleVariant = 'blocking' | 'stream' | 'agui'
+
+interface ExamplePageLayoutProps {
+  title: string
+  description: string
+  sessionId: string
+  initialMessages: Message[]
+  variant: ExampleVariant
+  agents: AgentInfo[]
+  initialActiveAgentId?: string | null
+  initialState?: Record<string, unknown>
+}
+
+export function ExamplePageLayout({
+  title,
+  description,
+  sessionId,
+  initialMessages,
+  variant,
+  agents,
+  initialActiveAgentId,
+  initialState,
+}: ExamplePageLayoutProps) {
+  const [activeAgentId, setActiveAgentId] = useState<string | null>(initialActiveAgentId ?? null)
+  const [state, setState] = useState<Record<string, unknown>>(initialState ?? {})
+
+  const handleSessionUpdate = useCallback(
+    (update: { activeAgentId: string | null; state: Record<string, unknown> }) => {
+      setActiveAgentId(update.activeAgentId)
+      setState(update.state)
+    },
+    [],
+  )
+
+  const handleRestart = useCallback(async () => {
+    const fresh = await restartSession(sessionId)
+    return {
+      messages: fresh.messages,
+      activeAgentId: fresh.activeAgentId,
+      state: fresh.state as Record<string, unknown>,
+    }
+  }, [sessionId])
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        px: { xs: 2, sm: 3, md: 5, lg: 8 },
+        maxWidth: 1600,
+        width: '100%',
+        mx: 'auto',
+      }}
+    >
+      <Typography variant="h5" fontWeight="bold" sx={{ pt: 3 }}>
+        {title}
+      </Typography>
+      <Typography variant="body1" color="text.secondary" sx={{ pt: 1, pb: 0, lineHeight: 1.6 }}>
+        {description}
+      </Typography>
+      <Box
+        sx={{
+          flex: 1,
+          py: 3,
+          minHeight: 0,
+          display: 'grid',
+          gridTemplateColumns: { xs: '1fr', md: '60% 40%' },
+          gap: 3,
+        }}
+      >
+        <Box sx={{ minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+          {variant === 'blocking' && (
+            <Chat
+              sessionId={sessionId}
+              initialMessages={initialMessages}
+              onSessionUpdate={handleSessionUpdate}
+              onRestart={handleRestart}
+            />
+          )}
+          {variant === 'stream' && (
+            <StreamChat
+              sessionId={sessionId}
+              initialMessages={initialMessages}
+              onSessionUpdate={handleSessionUpdate}
+              onRestart={handleRestart}
+            />
+          )}
+          {variant === 'agui' && (
+            <AguiChat
+              sessionId={sessionId}
+              initialMessages={initialMessages}
+              onSessionUpdate={handleSessionUpdate}
+              onRestart={handleRestart}
+            />
+          )}
+        </Box>
+        <Box sx={{ minHeight: 0, display: 'flex', flexDirection: 'column', gap: 3, overflow: 'auto' }}>
+          <AgentGraph agents={agents} activeAgentId={activeAgentId} />
+          <StateViewer state={state} />
+        </Box>
+      </Box>
+    </Box>
+  )
+}

package/template/app/components/organisms/OnboardingChat.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { useCallback } from 'react'
+import { StreamChat } from './StreamChat'
+import { restartSession } from '@lib/actions/restartSession'
+import type { Message } from '@genui/a3'
+
+interface OnboardingChatProps {
+  sessionId: string
+  initialMessages: Message[]
+}
+
+export function OnboardingChat({ sessionId, initialMessages }: OnboardingChatProps) {
+  const handleRestart = useCallback(async () => {
+    const fresh = await restartSession(sessionId)
+    return {
+      messages: fresh.messages,
+      activeAgentId: fresh.activeAgentId,
+      state: fresh.state as Record<string, unknown>,
+    }
+  }, [sessionId])
+
+  return <StreamChat sessionId={sessionId} initialMessages={initialMessages} onRestart={handleRestart} />
+}

package/template/app/components/organisms/Sidebar.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+import { Box, Drawer, List, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
+import HomeOutlined from '@mui/icons-material/HomeOutlined'
+import SmartToyOutlined from '@mui/icons-material/SmartToyOutlined'
+import CodeOutlined from '@mui/icons-material/CodeOutlined'
+import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline'
+import StreamIcon from '@mui/icons-material/Stream'
+import ExtensionIcon from '@mui/icons-material/Extension'
+import { AppLogo } from '@atoms'
+import { SIDEBAR_WIDTH } from './SidebarLayout'
+import { NAV_HOME, NAV_ONBOARDING, NAV_EXAMPLES, NAV_CHAT, NAV_STREAMING, NAV_AGUI } from '@constants/ui'
+
+interface SidebarProps {
+  open: boolean
+  onClose: () => void
+}
+
+export function Sidebar({ open, onClose }: SidebarProps) {
+  const pathname = usePathname()
+
+  const drawerContent = (
+    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <Box sx={{ p: 2, display: 'flex', alignItems: 'center', gap: 1.5 }}>
+        <AppLogo width={28} height={28} />
+      </Box>
+
+      <List component="nav" sx={{ px: 1 }}>
+        <ListItemButton
+          component={Link}
+          href="/"
+          selected={pathname === '/'}
+          onClick={onClose}
+          sx={{ borderRadius: 1, mb: 0.5 }}
+        >
+          <ListItemIcon sx={{ minWidth: 40 }}>
+            <HomeOutlined />
+          </ListItemIcon>
+          <ListItemText primary={NAV_HOME} />
+        </ListItemButton>
+
+        <ListItemButton
+          component={Link}
+          href="/onboarding"
+          selected={pathname === '/onboarding'}
+          onClick={onClose}
+          sx={{ borderRadius: 1, mb: 0.5 }}
+        >
+          <ListItemIcon sx={{ minWidth: 40 }}>
+            <SmartToyOutlined />
+          </ListItemIcon>
+          <ListItemText primary={NAV_ONBOARDING} />
+        </ListItemButton>
+
+        <ListItemButton
+          component={Link}
+          href="/examples"
+          selected={pathname === '/examples'}
+          onClick={onClose}
+          sx={{ borderRadius: 1, mb: 0.5 }}
+        >
+          <ListItemIcon sx={{ minWidth: 40 }}>
+            <CodeOutlined />
+          </ListItemIcon>
+          <ListItemText primary={NAV_EXAMPLES} />
+        </ListItemButton>
+
+        <List component="div" disablePadding>
+          <ListItemButton
+            component={Link}
+            href="/examples/chat"
+            selected={pathname === '/examples/chat'}
+            onClick={onClose}
+            sx={{ borderRadius: 1, mb: 0.5, pl: 4 }}
+          >
+            <ListItemIcon sx={{ minWidth: 40 }}>
+              <ChatBubbleOutlineIcon />
+            </ListItemIcon>
+            <ListItemText primary={NAV_CHAT} />
+          </ListItemButton>
+
+          <ListItemButton
+            component={Link}
+            href="/examples/stream"
+            selected={pathname === '/examples/stream'}
+            onClick={onClose}
+            sx={{ borderRadius: 1, mb: 0.5, pl: 4 }}
+          >
+            <ListItemIcon sx={{ minWidth: 40 }}>
+              <StreamIcon />
+            </ListItemIcon>
+            <ListItemText primary={NAV_STREAMING} />
+          </ListItemButton>
+
+          <ListItemButton
+            component={Link}
+            href="/examples/agui"
+            selected={pathname === '/examples/agui'}
+            onClick={onClose}
+            sx={{ borderRadius: 1, mb: 0.5, pl: 4 }}
+          >
+            <ListItemIcon sx={{ minWidth: 40 }}>
+              <ExtensionIcon />
+            </ListItemIcon>
+            <ListItemText primary={NAV_AGUI} />
+          </ListItemButton>
+        </List>
+      </List>
+    </Box>
+  )
+
+  return (
+    <>
+      {/* Mobile drawer */}
+      <Drawer
+        variant="temporary"
+        open={open}
+        onClose={onClose}
+        ModalProps={{ keepMounted: true }}
+        sx={{
+          display: { xs: 'block', md: 'none' },
+          '& .MuiDrawer-paper': { width: SIDEBAR_WIDTH },
+        }}
+      >
+        {drawerContent}
+      </Drawer>
+
+      {/* Desktop drawer */}
+      <Drawer
+        variant="permanent"
+        sx={{
+          display: { xs: 'none', md: 'block' },
+          '& .MuiDrawer-paper': {
+            width: SIDEBAR_WIDTH,
+            borderRight: 1,
+            borderColor: 'divider',
+          },
+        }}
+        open
+      >
+        {drawerContent}
+      </Drawer>
+    </>
+  )
+}

package/template/app/components/organisms/SidebarLayout.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { ReactNode, useState } from 'react'
+import { Box, IconButton, useMediaQuery, useTheme } from '@mui/material'
+import MenuIcon from '@mui/icons-material/Menu'
+import { AppLogo } from '@atoms'
+import { Sidebar } from './Sidebar'
+
+export const SIDEBAR_WIDTH = 260
+
+interface SidebarLayoutProps {
+  children: ReactNode
+}
+
+export function SidebarLayout({ children }: SidebarLayoutProps) {
+  const theme = useTheme()
+  const isDesktop = useMediaQuery(theme.breakpoints.up('md'))
+  const [mobileOpen, setMobileOpen] = useState(false)
+
+  return (
+    <Box sx={{ display: 'flex', height: '100vh' }}>
+      <Sidebar open={mobileOpen} onClose={() => setMobileOpen(false)} />
+
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'auto',
+          height: '100vh',
+          ml: { md: `${SIDEBAR_WIDTH}px` },
+        }}
+      >
+        {!isDesktop && (
+          <Box
+            sx={{
+              p: 1,
+              px: 2,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+              borderBottom: 1,
+              borderColor: 'divider',
+              bgcolor: 'background.paper',
+            }}
+          >
+            <IconButton onClick={() => setMobileOpen(true)} edge="start">
+              <MenuIcon />
+            </IconButton>
+            <AppLogo width={24} height={24} />
+          </Box>
+        )}
+        {children}
+      </Box>
+    </Box>
+  )
+}