@houston-ai/chat 0.6.0

package/src/feed-to-messages.ts

@@ -0,0 +1,174 @@
+/**
+ * Convert FeedItem[] to ChatMessage[] for rendering.
+ *
+ * Groups consecutive feed items into logical messages, same as how
+ * AI Elements structures its message list. Pairs tool_call items with
+ * their corresponding tool_result items.
+ */
+
+import type { FeedItem } from "./types";
+
+export interface ToolEntry {
+  name: string;
+  input?: unknown;
+  result?: { content: string; is_error: boolean };
+}
+
+export interface ChatMessage {
+  key: string;
+  from: "user" | "assistant";
+  content: string;
+  isStreaming: boolean;
+  reasoning?: { content: string; isStreaming: boolean };
+  tools: ToolEntry[];
+  /** Source channel if the message came from an external channel. */
+  source?: string;
+}
+
+export function feedItemsToMessages(items: FeedItem[]): ChatMessage[] {
+  const messages: ChatMessage[] = [];
+  let cur: ChatMessage | null = null;
+
+  function getCur(): ChatMessage | null {
+    return cur;
+  }
+
+  const flush = () => {
+    if (cur) {
+      messages.push(cur);
+      cur = null;
+    }
+  };
+
+  const ensureAssistant = (): ChatMessage => {
+    if (!cur || cur.from !== "assistant") {
+      flush();
+      cur = {
+        key: `assistant-${messages.length}`,
+        from: "assistant",
+        content: "",
+        isStreaming: false,
+        tools: [],
+      };
+    }
+    return cur;
+  };
+
+  for (const item of items) {
+    switch (item.feed_type) {
+      case "user_message": {
+        flush();
+        const { source, text } = extractSource(item.data);
+        messages.push({
+          key: `user-${messages.length}`,
+          from: "user",
+          content: text,
+          isStreaming: false,
+          tools: [],
+          source,
+        });
+        break;
+      }
+
+      case "assistant_text": {
+        const msg = ensureAssistant();
+        msg.content = item.data;
+        msg.isStreaming = false;
+        flush();
+        break;
+      }
+
+      case "assistant_text_streaming": {
+        const msg = ensureAssistant();
+        msg.content = item.data;
+        msg.isStreaming = true;
+        break;
+      }
+
+      case "thinking_streaming":
+      case "thinking": {
+        const isStream = item.feed_type === "thinking_streaming";
+        const prev = getCur();
+        if (
+          prev &&
+          prev.from === "assistant" &&
+          (prev.tools.length > 0 || prev.content)
+        ) {
+          flush();
+        }
+        const msg = ensureAssistant();
+        msg.reasoning = { content: item.data, isStreaming: isStream };
+        if (isStream) msg.isStreaming = true;
+        if (!isStream) flush();
+        break;
+      }
+
+      case "tool_call": {
+        const msg = ensureAssistant();
+        msg.tools.push({ name: item.data.name, input: item.data.input });
+        if (!msg.content) msg.isStreaming = true;
+        break;
+      }
+
+      case "tool_result": {
+        // Find the most recent unmatched tool_call — it might be in the
+        // current message OR in an already-flushed one (thinking blocks
+        // can cause flushes between tool_call and tool_result).
+        let matched = false;
+        const active = getCur();
+        if (active && active.from === "assistant") {
+          for (let j = active.tools.length - 1; j >= 0; j--) {
+            if (!active.tools[j].result) {
+              active.tools[j].result = {
+                content: item.data.content,
+                is_error: item.data.is_error,
+              };
+              matched = true;
+              break;
+            }
+          }
+        }
+        if (!matched) {
+          // Search flushed messages backwards
+          for (let m = messages.length - 1; m >= 0 && !matched; m--) {
+            const msg = messages[m];
+            if (msg.from !== "assistant") continue;
+            for (let j = msg.tools.length - 1; j >= 0; j--) {
+              if (!msg.tools[j].result) {
+                msg.tools[j].result = {
+                  content: item.data.content,
+                  is_error: item.data.is_error,
+                };
+                matched = true;
+                break;
+              }
+            }
+          }
+        }
+        break;
+      }
+
+      case "system_message":
+        break;
+
+      case "final_result":
+        flush();
+        break;
+    }
+  }
+
+  flush();
+  return messages;
+}
+
+/** Extract a `[ChannelName]` prefix from a user message, if present. */
+function extractSource(text: string): { source?: string; text: string } {
+  const match = text.match(/^\[(\w+)\]\s*/);
+  if (match) {
+    return {
+      source: match[1].toLowerCase(),
+      text: text.slice(match[0].length),
+    };
+  }
+  return { text };
+}

package/src/index.ts

@@ -0,0 +1,180 @@
+// === Types ===
+export type { FeedItem, RunStatus } from "./types";
+export type { ToolEntry, ChatMessage } from "./feed-to-messages";
+
+// === AI Elements: Conversation ===
+export {
+  Conversation,
+  ConversationContent,
+  ConversationEmptyState,
+  ConversationScrollButton,
+  ConversationDownload,
+  messagesToMarkdown,
+} from "./ai-elements/conversation";
+export type {
+  ConversationProps,
+  ConversationContentProps,
+  ConversationEmptyStateProps,
+  ConversationScrollButtonProps,
+  ConversationDownloadProps,
+} from "./ai-elements/conversation";
+
+// === AI Elements: Message ===
+export {
+  Message,
+  MessageContent,
+  MessageActions,
+  MessageAction,
+  MessageBranch,
+  MessageBranchContent,
+  MessageBranchSelector,
+  MessageBranchPrevious,
+  MessageBranchNext,
+  MessageBranchPage,
+  MessageResponse,
+  MessageToolbar,
+} from "./ai-elements/message";
+export type {
+  MessageProps,
+  MessageContentProps,
+  MessageActionsProps,
+  MessageActionProps,
+  MessageBranchProps,
+  MessageBranchContentProps,
+  MessageBranchSelectorProps,
+  MessageBranchPreviousProps,
+  MessageBranchNextProps,
+  MessageBranchPageProps,
+  MessageResponseProps,
+  MessageToolbarProps,
+} from "./ai-elements/message";
+
+// === AI Elements: Reasoning ===
+export {
+  Reasoning,
+  ReasoningTrigger,
+  ReasoningContent,
+  useReasoning,
+} from "./ai-elements/reasoning";
+export type {
+  ReasoningProps,
+  ReasoningTriggerProps,
+  ReasoningContentProps,
+} from "./ai-elements/reasoning";
+
+// === AI Elements: Prompt Input ===
+export {
+  PromptInput,
+  PromptInputProvider,
+  PromptInputBody,
+  PromptInputTextarea,
+  PromptInputHeader,
+  PromptInputFooter,
+  PromptInputTools,
+  PromptInputButton,
+  PromptInputSubmit,
+  PromptInputActionMenu,
+  PromptInputActionMenuTrigger,
+  PromptInputActionMenuContent,
+  PromptInputActionMenuItem,
+  PromptInputActionAddAttachments,
+  PromptInputActionAddScreenshot,
+  PromptInputSelect,
+  PromptInputSelectTrigger,
+  PromptInputSelectContent,
+  PromptInputSelectItem,
+  PromptInputSelectValue,
+  PromptInputHoverCard,
+  PromptInputHoverCardTrigger,
+  PromptInputHoverCardContent,
+  PromptInputTabsList,
+  PromptInputTab,
+  PromptInputTabLabel,
+  PromptInputTabBody,
+  PromptInputTabItem,
+  PromptInputCommand,
+  PromptInputCommandInput,
+  PromptInputCommandList,
+  PromptInputCommandEmpty,
+  PromptInputCommandGroup,
+  PromptInputCommandItem,
+  PromptInputCommandSeparator,
+  usePromptInputController,
+  useProviderAttachments,
+  usePromptInputAttachments,
+  usePromptInputReferencedSources,
+} from "./ai-elements/prompt-input";
+export type {
+  PromptInputProps,
+  PromptInputProviderProps,
+  PromptInputMessage,
+  PromptInputBodyProps,
+  PromptInputTextareaProps,
+  PromptInputHeaderProps,
+  PromptInputFooterProps,
+  PromptInputToolsProps,
+  PromptInputButtonProps,
+  PromptInputButtonTooltip,
+  PromptInputSubmitProps,
+  PromptInputActionMenuProps,
+  PromptInputActionMenuTriggerProps,
+  PromptInputActionMenuContentProps,
+  PromptInputActionMenuItemProps,
+  PromptInputActionAddAttachmentsProps,
+  PromptInputActionAddScreenshotProps,
+  PromptInputSelectProps,
+  PromptInputSelectTriggerProps,
+  PromptInputSelectContentProps,
+  PromptInputSelectItemProps,
+  PromptInputSelectValueProps,
+  PromptInputHoverCardProps,
+  PromptInputHoverCardTriggerProps,
+  PromptInputHoverCardContentProps,
+  PromptInputTabsListProps,
+  PromptInputTabProps,
+  PromptInputTabLabelProps,
+  PromptInputTabBodyProps,
+  PromptInputTabItemProps,
+  PromptInputCommandProps,
+  PromptInputCommandInputProps,
+  PromptInputCommandListProps,
+  PromptInputCommandEmptyProps,
+  PromptInputCommandGroupProps,
+  PromptInputCommandItemProps,
+  PromptInputCommandSeparatorProps,
+  PromptInputControllerProps,
+  AttachmentsContext,
+  TextInputContext,
+  ReferencedSourcesContext,
+} from "./ai-elements/prompt-input";
+
+// === AI Elements: Shimmer ===
+export { Shimmer } from "./ai-elements/shimmer";
+export type { TextShimmerProps } from "./ai-elements/shimmer";
+
+// === AI Elements: Suggestion ===
+export { Suggestions, Suggestion } from "./ai-elements/suggestion";
+export type { SuggestionsProps, SuggestionProps } from "./ai-elements/suggestion";
+
+// === Chat Components ===
+export { ChatPanel } from "./chat-panel";
+export type { ChatPanelProps } from "./chat-panel";
+
+export { ChatInput } from "./chat-input";
+export type { ChatInputProps } from "./chat-input";
+export type { AttachMenuItem } from "./chat-input-parts";
+
+export { ToolActivity, ToolsAndCards, feedItemsToMessages } from "./chat-helpers";
+export type { ToolActivityProps, ToolsAndCardsProps } from "./chat-helpers";
+
+// === Progress ===
+export { useProgressSteps } from "./use-progress-steps";
+export type { ProgressStep, StepStatus } from "./use-progress-steps";
+export { ProgressPanel } from "./progress-panel";
+export type { ProgressPanelProps } from "./progress-panel";
+
+// === Utilities ===
+export { Typewriter } from "./typewriter";
+export { mergeFeedItem } from "./feed-merge";
+export { ChannelAvatar } from "./channel-avatar";
+export type { ChannelSource } from "./channel-avatar";

package/src/progress-panel.tsx

@@ -0,0 +1,82 @@
+/**
+ * ProgressPanel — shows what an agent is working on during a session.
+ *
+ * Renders as a right-side panel alongside chat when the agent has called
+ * update_progress. Steps are shown as an animated checklist:
+ * - pending: open circle
+ * - active: spinning loader (highlighted)
+ * - done: filled checkmark
+ */
+
+import { ScrollArea, cn } from "@houston-ai/core";
+import { Check, Circle, Loader2 } from "lucide-react";
+import type { ProgressStep } from "./use-progress-steps";
+
+export interface ProgressPanelProps {
+  steps: ProgressStep[];
+  /** Header title. Defaults to "Working on". */
+  title?: string;
+}
+
+export function ProgressPanel({ steps, title = "Working on" }: ProgressPanelProps) {
+  const doneCount = steps.filter((s) => s.status === "done").length;
+  const total = steps.length;
+
+  return (
+    <div className="flex flex-col h-full border-l border-border bg-secondary/30">
+      {/* Header */}
+      <div className="px-5 pt-5 pb-4 border-b border-border">
+        <h2 className="text-sm font-medium text-foreground">{title}</h2>
+        {total > 0 && (
+          <p className="text-xs text-muted-foreground mt-0.5">
+            {doneCount} of {total} steps complete
+          </p>
+        )}
+      </div>
+
+      {/* Step list */}
+      <ScrollArea className="flex-1">
+        <div className="px-5 py-4 space-y-1">
+          {steps.map((step, i) => (
+            <StepRow key={i} step={step} />
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
+
+function StepRow({ step }: { step: ProgressStep }) {
+  return (
+    <div
+      className={cn(
+        "flex items-start gap-3 px-3 py-2.5 rounded-lg transition-colors",
+        step.status === "active" && "bg-accent/50",
+      )}
+    >
+      <div className="mt-0.5 shrink-0">
+        {step.status === "done" && (
+          <div className="size-5 rounded-full bg-[#00a240] flex items-center justify-center">
+            <Check className="size-3 text-white" strokeWidth={3} />
+          </div>
+        )}
+        {step.status === "active" && (
+          <Loader2 className="size-5 text-foreground/60 animate-spin" strokeWidth={1.5} />
+        )}
+        {step.status === "pending" && (
+          <Circle className="size-5 text-muted-foreground/25" strokeWidth={1.5} />
+        )}
+      </div>
+      <p
+        className={cn(
+          "text-sm leading-snug",
+          step.status === "done" && "text-foreground/50",
+          step.status === "active" && "text-foreground font-medium",
+          step.status === "pending" && "text-foreground/60",
+        )}
+      >
+        {step.title}
+      </p>
+    </div>
+  );
+}

package/src/styles.css

@@ -0,0 +1,3 @@
+/* @houston-ai/chat — Tell Tailwind to scan this package's components */
+@source "./ai-elements";
+@source ".";

package/src/types.ts

@@ -0,0 +1,29 @@
+// Chat-related types extracted from Houston's type system.
+// Only the types needed by chat components are included here.
+
+export type FeedItem =
+  | { feed_type: "assistant_text"; data: string }
+  | { feed_type: "assistant_text_streaming"; data: string }
+  | { feed_type: "thinking"; data: string }
+  | { feed_type: "thinking_streaming"; data: string }
+  | { feed_type: "user_message"; data: string }
+  | { feed_type: "tool_call"; data: { name: string; input: unknown } }
+  | { feed_type: "tool_result"; data: { content: string; is_error: boolean } }
+  | { feed_type: "system_message"; data: string }
+  | {
+      feed_type: "final_result";
+      data: {
+        result: string;
+        cost_usd: number | null;
+        duration_ms: number | null;
+      };
+    };
+
+export type RunStatus =
+  | "running"
+  | "completed"
+  | "failed"
+  | "approved"
+  | "needs_you"
+  | "done"
+  | "error";

package/src/typewriter.tsx

@@ -0,0 +1,43 @@
+import { useState, useEffect, useRef } from "react";
+
+interface Props {
+  text: string;
+  speed?: number;
+  onComplete?: () => void;
+  children: (displayed: string) => React.ReactNode;
+}
+
+export function Typewriter({
+  text,
+  speed = 20,
+  onComplete,
+  children,
+}: Props) {
+  const [displayed, setDisplayed] = useState("");
+  const indexRef = useRef(0);
+  const completedRef = useRef(false);
+
+  useEffect(() => {
+    indexRef.current = 0;
+    completedRef.current = false;
+    setDisplayed("");
+
+    const interval = setInterval(() => {
+      indexRef.current++;
+      if (indexRef.current >= text.length) {
+        setDisplayed(text);
+        clearInterval(interval);
+        if (!completedRef.current) {
+          completedRef.current = true;
+          onComplete?.();
+        }
+      } else {
+        setDisplayed(text.slice(0, indexRef.current));
+      }
+    }, speed);
+
+    return () => clearInterval(interval);
+  }, [text, speed, onComplete]);
+
+  return <>{children(displayed)}</>;
+}

package/src/use-progress-steps.ts

@@ -0,0 +1,52 @@
+/**
+ * Extracts the latest update_progress tool call from the feed.
+ *
+ * Agents call update_progress({ steps: [{ title, status }] }) to communicate
+ * high-level goals. Each call replaces the previous — the last call in the
+ * feed is the authoritative state.
+ */
+
+import { useMemo } from "react";
+import type { FeedItem } from "./types";
+
+export type StepStatus = "pending" | "active" | "done";
+
+export interface ProgressStep {
+  title: string;
+  status: StepStatus;
+}
+
+function isProgressInput(
+  input: unknown,
+): input is { steps: { title: string; status: string }[] } {
+  if (!input || typeof input !== "object") return false;
+  const obj = input as Record<string, unknown>;
+  return Array.isArray(obj.steps);
+}
+
+function parseStatus(raw: string): StepStatus {
+  if (raw === "done") return "done";
+  if (raw === "active") return "active";
+  return "pending";
+}
+
+export function useProgressSteps(feedItems: FeedItem[]): ProgressStep[] {
+  return useMemo(() => {
+    let latest: ProgressStep[] | null = null;
+
+    for (const item of feedItems) {
+      if (
+        item.feed_type === "tool_call" &&
+        item.data.name === "update_progress" &&
+        isProgressInput(item.data.input)
+      ) {
+        latest = item.data.input.steps.map((s) => ({
+          title: s.title,
+          status: parseStatus(s.status),
+        }));
+      }
+    }
+
+    return latest ?? [];
+  }, [feedItems]);
+}