create-theokit 1.2.6 → 1.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-theokit",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "type": "module",
   "description": "Scaffold a new TheoKit project",
   "license": "Apache-2.0",

package/templates/default/app/page.test.tsx

@@ -9,9 +9,12 @@ import Page from './page'
  * must both type-check AND render. Renders the real React tree in jsdom.
  */
 describe('default chat page', () => {
-  it('renders the empty state + quick actions + composer on first load', () => {
-    render(<Page />)
-    expect(screen.getByText('What should we build today?')).toBeDefined()
+  it('opens with the agent greeting + quick actions + composer on first load', () => {
+    const { container } = render(<Page />)
+    // The agent greets first — the transcript starts warm (like the terminal surface). ChatMessage renders
+    // the text across markdown spans, so assert the assistant message container structurally, not by text.
+    expect(container.querySelector('[data-theo-chat-message="assistant"]')).not.toBeNull()
+    // … with the quick-action suggestions and the composer.
     expect(screen.getByText('Summarize this page')).toBeDefined()
     expect(screen.getByText('Show available tools')).toBeDefined()
     expect(screen.getByText('Start a new conversation')).toBeDefined()

package/templates/default/app/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
   ChatThread,
   ChatMessage,
@@ -12,15 +12,7 @@ import {
   type UIMessage,
   type QuickAction,
 } from '@theokit/ui'
-import {
-  EmptyState,
-  CommandPalette,
-  Avatar,
-  Tooltip,
-  Button,
-  ScrollArea,
-  type CommandItem,
-} from '@usetheo/ui'
+import { CommandPalette, Avatar, Tooltip, Button, ScrollArea, type CommandItem } from '@usetheo/ui'
 import { Sparkles, Wrench, RotateCcw, Command } from 'lucide-react'
 import { useAgent } from 'theokit/client'
 
@@ -32,16 +24,16 @@ import { useAgent } from 'theokit/client'
  *   AgentStreaming            → streaming indicator
  *   AgentErrorCard            → error display
  *   ChatComposer              → bottom input bar
- *   EmptyState                → first-load screen
+ *   QuickActionChips          → first-load suggestions
  *   ContextWindowBar          → context usage at top
  *   CommandPalette            → ⌘K quick actions
- *   Avatar                    → assistant/user face in messages
- *   Tooltip                   → hints on icons
+ *   Avatar / Tooltip          → message faces + icon hints
  *
- * `useAgent` binds to the `agents/chat.ts` endpoint, consumes the ai-sdk
- * `UIMessageStream`, and handles AbortController cleanup + StrictMode safety.
- * `messages` are the reconstructed ASSISTANT `UIMessage[]`; user turns are tracked
- * locally and interleaved. Edit `agents/chat.ts` to pick your model / add tools.
+ * `useAgent` binds to the `agents/chat.ts` endpoint and consumes the ai-sdk `UIMessageStream`. It opens a
+ * FRESH stream per send, so `messages` hold only the CURRENT turn (and carry no stable id) — we OWN the
+ * transcript: `history` accumulates every finished turn with our own unique ids (`u-N` / `a-N` / `greeting`),
+ * and the in-flight reply is shown live until it commits. This keeps the order correct, the history complete,
+ * and every id unique. Edit `agents/chat.ts` to pick your model / add tools.
  */
 
 const QUICK_ACTIONS: QuickAction[] = [
@@ -63,6 +55,18 @@ const CONTEXT_USED = 4_200
 const CONTEXT_TOTAL = 200_000
 const MODEL_NAME = 'gpt-4o-mini'
 
+/** The agent's opening line — so the conversation starts warm instead of empty. */
+const GREETING: UIMessage = {
+  id: 'greeting',
+  role: 'assistant',
+  parts: [
+    {
+      type: 'text',
+      text: "Hi — I'm your TheoKit agent. Ask me anything and I'll stream a reply. Try a quick action below or type your own.",
+    },
+  ],
+}
+
 const ASSISTANT_AVATAR = (
   <Avatar size="sm" tone="primary">
     <Avatar.Fallback>TH</Avatar.Fallback>
@@ -76,8 +80,8 @@ const USER_AVATAR = (
 
 export default function Page() {
   const [composerValue, setComposerValue] = useState('')
-  const [userMessages, setUserMessages] = useState<UIMessage[]>([])
   const [paletteOpen, setPaletteOpen] = useState(false)
+  const [history, setHistory] = useState<UIMessage[]>([GREETING])
   const { messages, send, status, reset } = useAgent<{ message: string }>('/api/agents/chat')
 
   // ⌘K / Ctrl+K opens the CommandPalette.
@@ -92,29 +96,39 @@ export default function Page() {
     return () => window.removeEventListener('keydown', onKey)
   }, [])
 
-  // Interleave local user turns with the reconstructed assistant UIMessages,
-  // turn by turn. `ChatMessage` renders each message's parts (text/tool/reasoning).
-  const thread = useMemo<UIMessage[]>(() => {
-    const out: UIMessage[] = []
-    const turns = Math.max(userMessages.length, messages.length)
-    for (let i = 0; i < turns; i++) {
-      const user = userMessages[i]
-      const assistant = messages[i]
-      if (user) out.push(user)
-      if (assistant) out.push(assistant)
+  const isStreaming = status === 'streaming'
+  const users = history.filter((m) => m.role === 'user').length
+  const replies = history.filter((m) => m.role === 'assistant' && m.id !== 'greeting').length
+  // A sent prompt is still awaiting its committed reply — the current turn is "in flight".
+  const pending = users > replies
+
+  // Merge the in-flight turn's parts into ONE assistant message with our own unique id (the SDK's ids are
+  // empty, which would collide in the thread). `suffix` distinguishes the live copy from the committed one.
+  const inflightReply = (suffix: string): UIMessage => ({
+    id: `a-${String(replies)}${suffix}`,
+    role: 'assistant',
+    parts: messages.flatMap((m) => m.parts),
+  })
+
+  // Commit the finished reply into history exactly once (the next send resets `messages`).
+  useEffect(() => {
+    if (!isStreaming && pending && messages.length > 0) {
+      setHistory((h) => [...h, inflightReply('')])
     }
-    return out
-  }, [userMessages, messages])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isStreaming, pending, messages, replies])
+
+  // Transcript = committed history + the in-flight reply (shown until it commits — no flicker, no double).
+  const thread = pending && messages.length > 0 ? [...history, inflightReply('-live')] : history
+  const onlyGreeting = history.length === 1 && !isStreaming
 
   function handleSubmit(value: string) {
     const trimmed = value.trim()
     if (!trimmed) return
-    const userMessage: UIMessage = {
-      id: `u-${String(userMessages.length)}`,
-      role: 'user',
-      parts: [{ type: 'text', text: trimmed }],
-    }
-    setUserMessages((prev) => [...prev, userMessage])
+    setHistory((h) => [
+      ...h,
+      { id: `u-${String(h.length)}`, role: 'user', parts: [{ type: 'text', text: trimmed }] },
+    ])
     send({ message: trimmed })
     setComposerValue('')
   }
@@ -122,7 +136,7 @@ export default function Page() {
   function handleQuickAction(id: string) {
     setPaletteOpen(false)
     if (id === 'reset') {
-      setUserMessages([])
+      setHistory([GREETING])
       reset()
       return
     }
@@ -131,8 +145,6 @@ export default function Page() {
     if (action && typeof action.label === 'string') handleSubmit(action.label)
   }
 
-  const isStreaming = status === 'streaming'
-  const isEmpty = thread.length === 0 && !isStreaming
   const hasError = status === 'error'
 
   return (
@@ -148,25 +160,18 @@ export default function Page() {
 
       <ScrollArea className="flex-1">
         <div className="mx-auto flex w-full max-w-3xl flex-col gap-4 px-6 py-6">
-          {isEmpty ? (
-            <EmptyState
-              eyebrow="Theo Agent"
-              icon={Sparkles}
-              title="What should we build today?"
-              description="Ask anything. This scaffold ships an agent at agents/chat.ts — edit it to pick your model or add tools."
-              action={<QuickActionChips actions={QUICK_ACTIONS} onSelect={handleQuickAction} />}
-            />
-          ) : (
-            <ChatThread>
-              {thread.map((message) => (
-                <ChatMessage
-                  key={message.id}
-                  message={message}
-                  avatar={message.role === 'assistant' ? ASSISTANT_AVATAR : USER_AVATAR}
-                />
-              ))}
-              {isStreaming && <AgentStreaming model={MODEL_NAME} />}
-            </ChatThread>
+          <ChatThread>
+            {thread.map((message) => (
+              <ChatMessage
+                key={message.id}
+                message={message}
+                avatar={message.role === 'assistant' ? ASSISTANT_AVATAR : USER_AVATAR}
+              />
+            ))}
+            {isStreaming && <AgentStreaming model={MODEL_NAME} />}
+          </ChatThread>
+          {onlyGreeting && (
+            <QuickActionChips actions={QUICK_ACTIONS} onSelect={handleQuickAction} />
           )}
         </div>
       </ScrollArea>

package/templates/default/package.json.tmpl

@@ -20,6 +20,7 @@
     "@theokit/sdk": "^2.13.0",
     "@theokit/ui": "^1.0.0",
     "@usetheo/ui": "^0.14.0",
+    "ai": "^7.0.0",
     "lucide-react": "^0.469.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",