@houston-ai/chat 0.2.0

package/src/chat-input-parts.tsx

@@ -0,0 +1,98 @@
+/**
+ * Internal sub-components for ChatInput.
+ * Not exported from the package index — used only by chat-input.tsx.
+ */
+
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { FileIcon, XIcon } from "lucide-react";
+
+// ---------------------------------------------------------------------------
+// FileChip — shows an attached file with a remove button
+// ---------------------------------------------------------------------------
+
+export interface FileChipProps {
+  name: string;
+  onRemove: () => void;
+}
+
+export function FileChip({ name, onRemove }: FileChipProps) {
+  return (
+    <div className="flex items-center gap-1 bg-secondary border border-black/[0.08] rounded-md px-2 py-1 text-xs text-foreground">
+      <FileIcon className="size-3 shrink-0 text-muted-foreground" />
+      <span className="max-w-[140px] truncate">{name}</span>
+      <button
+        type="button"
+        onClick={onRemove}
+        className="ml-0.5 rounded-sm text-muted-foreground hover:text-foreground transition-colors"
+        aria-label={`Remove ${name}`}
+      >
+        <XIcon className="size-3" />
+      </button>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AttachMenu — portal-rendered popup triggered by the + button.
+// ---------------------------------------------------------------------------
+
+export interface AttachMenuItem {
+  label: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+}
+
+export interface AttachMenuProps {
+  items: AttachMenuItem[];
+  onClose: () => void;
+  anchorRef: React.RefObject<HTMLElement | null>;
+}
+
+export function AttachMenu({ items, onClose, anchorRef }: AttachMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const posRef = useRef<{ left: number; bottom: number } | null>(null);
+
+  if (!posRef.current && anchorRef.current) {
+    const rect = anchorRef.current.getBoundingClientRect();
+    posRef.current = { left: rect.left, bottom: window.innerHeight - rect.top + 6 };
+  }
+
+  // Close on Escape
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  const pos = posRef.current;
+
+  const menu = (
+    <>
+      <div className="fixed inset-0 z-40" onClick={onClose} aria-hidden="true" />
+      <div
+        ref={menuRef}
+        className="fixed z-50 min-w-[180px] rounded-xl border border-black/[0.08] bg-white shadow-lg py-1"
+        style={pos ? { left: pos.left, bottom: pos.bottom } : { left: 0, bottom: 0, visibility: "hidden" as const }}
+        role="menu"
+      >
+        {items.map((item, i) => (
+          <button
+            key={i}
+            type="button"
+            role="menuitem"
+            onClick={() => { item.onClick(); onClose(); }}
+            className="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-accent transition-colors"
+          >
+            {item.icon}
+            {item.label}
+          </button>
+        ))}
+      </div>
+    </>
+  );
+
+  return createPortal(menu, document.body);
+}

package/src/chat-input.tsx

@@ -0,0 +1,231 @@
+/**
+ * ChatInput — prompt input with file attachments.
+ *
+ * Attachments render as cards ABOVE the composer (outside overflow-clip).
+ * The + button triggers a native file input via a <label> (most reliable).
+ */
+
+import { useCallback, useId, useState } from "react";
+import type { PromptInputMessage } from "./ai-elements/prompt-input";
+import {
+  PromptInput,
+  PromptInputBody,
+  PromptInputTextarea,
+  PromptInputSubmit,
+} from "./ai-elements/prompt-input";
+import {
+  AudioLinesIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+  ImageIcon,
+  MicIcon,
+  PlusIcon,
+  XIcon,
+  FileIcon as LucideFileIcon,
+} from "lucide-react";
+
+type InputStatus = "ready" | "streaming" | "submitted";
+
+export interface ChatInputProps {
+  onSend: (text: string, files: File[]) => void;
+  onStop?: () => void;
+  status?: InputStatus;
+  placeholder?: string;
+}
+
+function getExt(name: string): string {
+  const dot = name.lastIndexOf(".");
+  return dot >= 0 ? name.slice(dot + 1).toLowerCase() : "";
+}
+
+function getTypeLabel(ext: string): string {
+  const map: Record<string, string> = {
+    pdf: "PDF", doc: "Word", docx: "Word", txt: "Text", rtf: "Rich Text",
+    csv: "Spreadsheet", xls: "Excel", xlsx: "Excel",
+    png: "Image", jpg: "Image", jpeg: "Image", gif: "Image", svg: "Image",
+    zip: "Zip Archive", rar: "Archive", "7z": "Archive",
+  };
+  return map[ext] ?? (ext ? ext.toUpperCase() : "File");
+}
+
+/** File type icon matching @houston-ai/workspace's FileRow icons */
+function AttachmentIcon({ ext }: { ext: string }) {
+  if (ext === "pdf") {
+    return (
+      <div className="size-8 rounded-md bg-[#E5252A] flex items-center justify-center shrink-0">
+        <svg className="size-4" viewBox="0 0 16 16" fill="none">
+          <text
+            x="8" y="11.5" textAnchor="middle" fill="white"
+            fontSize="8" fontWeight="700" fontFamily="system-ui, sans-serif"
+          >
+            PDF
+          </text>
+        </svg>
+      </div>
+    );
+  }
+  if (["xlsx", "xls", "csv"].includes(ext)) {
+    return (
+      <div className="size-8 rounded-md bg-[#34A853] flex items-center justify-center shrink-0">
+        <FileSpreadsheetIcon className="size-4 text-white" strokeWidth={2} />
+      </div>
+    );
+  }
+  if (["doc", "docx", "txt", "rtf"].includes(ext)) {
+    return (
+      <div className="size-8 rounded-md bg-[#4285F4] flex items-center justify-center shrink-0">
+        <FileTextIcon className="size-4 text-white" strokeWidth={2} />
+      </div>
+    );
+  }
+  if (["png", "jpg", "jpeg", "gif", "svg", "webp", "tif", "tiff"].includes(ext)) {
+    return (
+      <div className="size-8 rounded-md bg-[#9333EA] flex items-center justify-center shrink-0">
+        <ImageIcon className="size-4 text-white" strokeWidth={2} />
+      </div>
+    );
+  }
+  return (
+    <div className="size-8 rounded-md bg-stone-400 flex items-center justify-center shrink-0">
+      <LucideFileIcon className="size-4 text-white" strokeWidth={2} />
+    </div>
+  );
+}
+
+export function ChatInput({
+  onSend,
+  onStop,
+  status = "ready",
+  placeholder = "Type a message...",
+}: ChatInputProps) {
+  const [text, setText] = useState("");
+  const [files, setFiles] = useState<File[]>([]);
+  const fileInputId = useId();
+
+  const handleTextChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => setText(e.target.value),
+    [],
+  );
+
+  const handleSubmit = useCallback(
+    (message: PromptInputMessage) => {
+      const trimmed = message.text?.trim();
+      if (!trimmed && files.length === 0) return;
+      onSend(trimmed ?? "", files);
+      setText("");
+      setFiles([]);
+    },
+    [onSend, files],
+  );
+
+  const handleFileChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!e.target.files || e.target.files.length === 0) return;
+      setFiles((prev) => [...prev, ...Array.from(e.target.files!)]);
+      e.target.value = "";
+    },
+    [],
+  );
+
+  const removeFile = useCallback((index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+
+  const hasContent = text.trim().length > 0 || files.length > 0;
+
+  return (
+    <div className="shrink-0 px-4 pb-6 pt-2">
+      <div className="max-w-3xl mx-auto">
+        {/* Native file input — hidden, triggered by label */}
+        <input
+          id={fileInputId}
+          type="file"
+          multiple
+          className="sr-only"
+          onChange={handleFileChange}
+          tabIndex={-1}
+        />
+
+        {/* Attachment cards — ABOVE the composer, always-visible scrollbar */}
+        {files.length > 0 && (
+          <div
+            className="flex gap-2 pb-1 mb-2 overflow-x-auto"
+            style={{ scrollbarWidth: "thin" }}
+          >
+            {files.map((file, idx) => {
+              const ext = getExt(file.name);
+              return (
+                <div
+                  key={`${file.name}-${idx}`}
+                  className="relative flex items-center gap-2.5 rounded-xl border border-black/[0.08] bg-white pl-2.5 pr-8 py-2 min-w-0 shrink-0 max-w-[240px] shadow-sm"
+                >
+                  <AttachmentIcon ext={ext} />
+                  <div className="min-w-0">
+                    <p className="text-xs font-medium text-foreground truncate leading-tight">
+                      {file.name}
+                    </p>
+                    <p className="text-[10px] text-muted-foreground leading-tight">
+                      {getTypeLabel(ext)}
+                    </p>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => removeFile(idx)}
+                    className="absolute top-1.5 right-1.5 size-4 rounded-full bg-black/50 text-white flex items-center justify-center hover:bg-black/70 transition-colors"
+                    aria-label={`Remove ${file.name}`}
+                  >
+                    <XIcon className="size-2.5" strokeWidth={3} />
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        <PromptInput onSubmit={handleSubmit}>
+          {/* + button — label triggers file input natively */}
+          <div className="flex items-center [grid-area:leading]">
+            <label
+              htmlFor={fileInputId}
+              className="flex h-9 w-9 items-center justify-center rounded-full text-muted-foreground hover:bg-accent transition-colors cursor-pointer"
+              aria-label="Attach files"
+            >
+              <PlusIcon className="size-5" />
+            </label>
+          </div>
+
+          <PromptInputBody>
+            <PromptInputTextarea
+              onChange={handleTextChange}
+              value={text}
+              placeholder={placeholder}
+            />
+          </PromptInputBody>
+
+          <div className="flex items-center gap-1.5 [grid-area:trailing]">
+            {status === "ready" && (
+              <button
+                type="button"
+                className="flex h-9 w-9 items-center justify-center rounded-full text-muted-foreground hover:bg-accent transition-colors"
+                aria-label="Dictate"
+              >
+                <MicIcon className="size-5" />
+              </button>
+            )}
+            {!hasContent && status === "ready" ? (
+              <button
+                type="button"
+                className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors"
+                aria-label="Voice mode"
+              >
+                <AudioLinesIcon className="size-5" />
+              </button>
+            ) : (
+              <PromptInputSubmit status={status} onStop={onStop} />
+            )}
+          </div>
+        </PromptInput>
+      </div>
+    </div>
+  );
+}

package/src/chat-panel.tsx

@@ -0,0 +1,194 @@
+/**
+ * ChatPanel -- THE single chat experience component.
+ * Follows the Vercel AI Elements chatbot example exactly.
+ * Generic version: accepts feedItems/status as props, no store dependencies.
+ */
+import { useMemo } from "react";
+import type { FeedItem } from "./types";
+import type { ReactNode } from "react";
+
+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+} from "./ai-elements/conversation";
+import {
+  Message,
+  MessageContent,
+  MessageResponse,
+} from "./ai-elements/message";
+import {
+  Reasoning,
+  ReasoningContent,
+  ReasoningTrigger,
+} from "./ai-elements/reasoning";
+
+import { feedItemsToMessages, ToolsAndCards } from "./chat-helpers";
+import type { ToolsAndCardsProps } from "./chat-helpers";
+import { ChatInput } from "./chat-input";
+import { Shimmer } from "./ai-elements/shimmer";
+
+// ---------------------------------------------------------------------------
+// ChatPanel props
+// ---------------------------------------------------------------------------
+
+type ChatStatus = "ready" | "streaming" | "submitted";
+
+export interface ChatPanelProps {
+  sessionKey: string;
+  feedItems: FeedItem[];
+  onSend: (text: string, files: File[]) => void;
+  onStop?: () => void;
+  onBack?: () => void;
+  isLoading: boolean;
+  placeholder?: string;
+  emptyState?: ReactNode;
+  /** Override status derivation. If not provided, status is derived from feedItems. */
+  status?: ChatStatus;
+  /**
+   * Custom loading indicator shown when status is "submitted" and no messages yet.
+   * Defaults to a shimmering "Thinking..." text.
+   */
+  thinkingIndicator?: ReactNode;
+  /**
+   * Optional transform applied to each assistant message's content before rendering.
+   * Return { content, extra } where content is the cleaned text and extra is
+   * an optional ReactNode rendered below the message response.
+   */
+  transformContent?: (content: string) => {
+    content: string;
+    extra?: ReactNode;
+  };
+  /** Props forwarded to ToolsAndCards for custom tool rendering */
+  toolLabels?: ToolsAndCardsProps["toolLabels"];
+  isSpecialTool?: ToolsAndCardsProps["isSpecialTool"];
+  renderToolResult?: ToolsAndCardsProps["renderToolResult"];
+  /** Optional callback to render an avatar for a message (e.g., channel logo). */
+  renderMessageAvatar?: (msg: import("./feed-to-messages").ChatMessage) => ReactNode | undefined;
+}
+
+function deriveStatus(items: FeedItem[], isLoading: boolean): ChatStatus {
+  const last = items[items.length - 1];
+  if (
+    last?.feed_type === "assistant_text_streaming" ||
+    last?.feed_type === "thinking_streaming" ||
+    last?.feed_type === "thinking" ||
+    last?.feed_type === "tool_call" ||
+    last?.feed_type === "tool_result"
+  )
+    return "streaming";
+  if (last?.feed_type === "user_message") return "submitted";
+  if (isLoading && items.length === 0) return "submitted";
+  return "ready";
+}
+
+const DefaultThinkingIndicator = () => (
+  <div className="py-1">
+    <Shimmer duration={2}>Thinking...</Shimmer>
+  </div>
+);
+
+export function ChatPanel({
+  feedItems,
+  onSend,
+  onStop,
+  onBack,
+  isLoading,
+  placeholder = "Type a message...",
+  emptyState,
+  status: statusProp,
+  thinkingIndicator,
+  transformContent,
+  toolLabels,
+  isSpecialTool,
+  renderToolResult,
+  renderMessageAvatar,
+}: ChatPanelProps) {
+  const status = statusProp ?? deriveStatus(feedItems, isLoading);
+  const messages = useMemo(() => feedItemsToMessages(feedItems), [feedItems]);
+  const hasMessages = messages.length > 0;
+
+  return (
+    <div className="flex flex-1 flex-col min-h-0 overflow-hidden">
+      {onBack && (
+        <div className="max-w-3xl mx-auto w-full px-4 pt-3">
+          <button
+            onClick={onBack}
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
+          >
+            <span>←</span> Back to chats
+          </button>
+        </div>
+      )}
+      {hasMessages || status !== "ready" ? (
+        <Conversation className="flex-1 min-h-0">
+          <ConversationContent className="max-w-3xl mx-auto">
+            {messages.map((msg, idx) => {
+              const isLastMsg = idx === messages.length - 1;
+              const streaming = msg.isStreaming && isLastMsg;
+              return (
+                <Message from={msg.from} key={msg.key} avatar={renderMessageAvatar?.(msg)}>
+                  <div>
+                    {msg.reasoning && (
+                      <Reasoning
+                        isStreaming={msg.reasoning.isStreaming && isLastMsg}
+                        defaultOpen={msg.reasoning.isStreaming && isLastMsg}
+                      >
+                        <ReasoningTrigger />
+                        <ReasoningContent>
+                          {msg.reasoning.content}
+                        </ReasoningContent>
+                      </Reasoning>
+                    )}
+                    {msg.tools.length > 0 && (
+                      <ToolsAndCards
+                        tools={msg.tools}
+                        isStreaming={streaming}
+                        toolLabels={toolLabels}
+                        isSpecialTool={isSpecialTool}
+                        renderToolResult={renderToolResult}
+                      />
+                    )}
+                    {msg.content && (() => {
+                      const transformed = msg.from === "assistant" && transformContent
+                        ? transformContent(msg.content)
+                        : null;
+                      const displayContent = transformed?.content ?? msg.content;
+                      return (
+                        <MessageContent>
+                          <MessageResponse isAnimating={streaming}>
+                            {displayContent}
+                          </MessageResponse>
+                          {transformed?.extra}
+                        </MessageContent>
+                      );
+                    })()}
+                  </div>
+                </Message>
+              );
+            })}
+            {status === "submitted" && (
+              <Message from="assistant">
+                <MessageContent>
+                  {thinkingIndicator ?? <DefaultThinkingIndicator />}
+                </MessageContent>
+              </Message>
+            )}
+          </ConversationContent>
+          <ConversationScrollButton />
+        </Conversation>
+      ) : (
+        <div className="flex-1 min-h-0 flex items-center justify-center">
+          {emptyState}
+        </div>
+      )}
+
+      <ChatInput
+        onSend={onSend}
+        onStop={onStop}
+        status={status}
+        placeholder={placeholder}
+      />
+    </div>
+  );
+}

package/src/feed-merge.ts

@@ -0,0 +1,43 @@
+import type { FeedItem } from "./types";
+
+/**
+ * Smart-merge a new FeedItem into an existing feed array.
+ *
+ * Handles streaming replacement logic:
+ * - `thinking_streaming` replaces previous `thinking_streaming`
+ * - `thinking` (final) replaces last `thinking_streaming`
+ * - `assistant_text_streaming` replaces previous `assistant_text_streaming`
+ * - `assistant_text` (final) replaces last `assistant_text_streaming`
+ * - Everything else is appended.
+ *
+ * Use this in your Zustand/Redux store to avoid duplicating merge logic.
+ */
+export function mergeFeedItem(items: FeedItem[], item: FeedItem): FeedItem[] {
+  const last = items[items.length - 1];
+
+  if (item.feed_type === "thinking_streaming") {
+    if (last?.feed_type === "thinking_streaming") {
+      return [...items.slice(0, -1), item];
+    }
+  }
+
+  if (item.feed_type === "thinking") {
+    if (last?.feed_type === "thinking_streaming") {
+      return [...items.slice(0, -1), item];
+    }
+  }
+
+  if (item.feed_type === "assistant_text_streaming") {
+    if (last?.feed_type === "assistant_text_streaming") {
+      return [...items.slice(0, -1), item];
+    }
+  }
+
+  if (item.feed_type === "assistant_text") {
+    if (last?.feed_type === "assistant_text_streaming") {
+      return [...items.slice(0, -1), item];
+    }
+  }
+
+  return [...items, item];
+}