@houston-ai/chat 0.2.0

package/src/ai-elements/reasoning.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@houston-ai/core";
+import { cn } from "@houston-ai/core";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Streamdown } from "streamdown";
+
+import { Shimmer } from "./shimmer";
+
+interface ReasoningContextValue {
+  isStreaming: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  duration: number | undefined;
+}
+
+const ReasoningContext = createContext<ReasoningContextValue | null>(null);
+
+export const useReasoning = () => {
+  const context = useContext(ReasoningContext);
+  if (!context) {
+    throw new Error("Reasoning components must be used within Reasoning");
+  }
+  return context;
+};
+
+export type ReasoningProps = ComponentProps<typeof Collapsible> & {
+  isStreaming?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  duration?: number;
+};
+
+const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_S = 1000;
+
+export const Reasoning = memo(
+  ({
+    className,
+    isStreaming = false,
+    open,
+    defaultOpen,
+    onOpenChange,
+    duration: durationProp,
+    children,
+    ...props
+  }: ReasoningProps) => {
+    const resolvedDefaultOpen = defaultOpen ?? isStreaming;
+    // Track if defaultOpen was explicitly set to false (to prevent auto-open)
+    const isExplicitlyClosed = defaultOpen === false;
+
+    const [isOpen, setIsOpen] = useControllableState<boolean>({
+      defaultProp: resolvedDefaultOpen,
+      onChange: onOpenChange,
+      prop: open,
+    });
+    const [duration, setDuration] = useControllableState<number | undefined>({
+      defaultProp: undefined,
+      prop: durationProp,
+    });
+
+    const hasEverStreamedRef = useRef(isStreaming);
+    const [hasAutoClosed, setHasAutoClosed] = useState(false);
+    const startTimeRef = useRef<number | null>(null);
+
+    // Track when streaming starts and compute duration
+    useEffect(() => {
+      if (isStreaming) {
+        hasEverStreamedRef.current = true;
+        if (startTimeRef.current === null) {
+          startTimeRef.current = Date.now();
+        }
+      } else if (startTimeRef.current !== null) {
+        setDuration(Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S));
+        startTimeRef.current = null;
+      }
+    }, [isStreaming, setDuration]);
+
+    // Auto-open when streaming starts (unless explicitly closed)
+    useEffect(() => {
+      if (isStreaming && !isOpen && !isExplicitlyClosed) {
+        setIsOpen(true);
+      }
+    }, [isStreaming, isOpen, setIsOpen, isExplicitlyClosed]);
+
+    // Auto-close when streaming ends (once only, and only if it ever streamed)
+    useEffect(() => {
+      if (
+        hasEverStreamedRef.current &&
+        !isStreaming &&
+        isOpen &&
+        !hasAutoClosed
+      ) {
+        const timer = setTimeout(() => {
+          setIsOpen(false);
+          setHasAutoClosed(true);
+        }, AUTO_CLOSE_DELAY);
+
+        return () => clearTimeout(timer);
+      }
+    }, [isStreaming, isOpen, setIsOpen, hasAutoClosed]);
+
+    const handleOpenChange = useCallback(
+      (newOpen: boolean) => {
+        setIsOpen(newOpen);
+      },
+      [setIsOpen]
+    );
+
+    const contextValue = useMemo(
+      () => ({ duration, isOpen, isStreaming, setIsOpen }),
+      [duration, isOpen, isStreaming, setIsOpen]
+    );
+
+    return (
+      <ReasoningContext.Provider value={contextValue}>
+        <Collapsible
+          className={cn("not-prose mb-4", className)}
+          onOpenChange={handleOpenChange}
+          open={isOpen}
+          {...props}
+        >
+          {children}
+        </Collapsible>
+      </ReasoningContext.Provider>
+    );
+  }
+);
+
+export type ReasoningTriggerProps = ComponentProps<
+  typeof CollapsibleTrigger
+> & {
+  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+};
+
+const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
+  if (isStreaming || duration === 0) {
+    return <Shimmer duration={1}>Thinking...</Shimmer>;
+  }
+  if (duration === undefined) {
+    return <p>Thought for a few seconds</p>;
+  }
+  return <p>Thought for {duration} seconds</p>;
+};
+
+export const ReasoningTrigger = memo(
+  ({
+    className,
+    children,
+    getThinkingMessage = defaultGetThinkingMessage,
+    ...props
+  }: ReasoningTriggerProps) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+
+    return (
+      <CollapsibleTrigger
+        className={cn(
+          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children ?? (
+          <>
+            <BrainIcon className="size-4" />
+            {getThinkingMessage(isStreaming, duration)}
+            <ChevronDownIcon
+              className={cn(
+                "size-4 transition-transform",
+                isOpen ? "rotate-180" : "rotate-0"
+              )}
+            />
+          </>
+        )}
+      </CollapsibleTrigger>
+    );
+  }
+);
+
+export type ReasoningContentProps = ComponentProps<
+  typeof CollapsibleContent
+> & {
+  children: string;
+};
+
+const streamdownPlugins = { cjk, code, math, mermaid };
+
+export const ReasoningContent = memo(
+  ({ className, children, ...props }: ReasoningContentProps) => (
+    <CollapsibleContent
+      className={cn(
+        "mt-4 text-sm",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className
+      )}
+      {...props}
+    >
+      <Streamdown plugins={streamdownPlugins}>{children}</Streamdown>
+    </CollapsibleContent>
+  )
+);
+
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";

package/src/ai-elements/shimmer.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { cn } from "@houston-ai/core";
+import type { MotionProps } from "motion/react";
+import { motion } from "motion/react";
+import type { CSSProperties, ElementType, JSX } from "react";
+import { memo, useMemo } from "react";
+
+type MotionHTMLProps = MotionProps & Record<string, unknown>;
+
+// Cache motion components at module level to avoid creating during render
+const motionComponentCache = new Map<
+  keyof JSX.IntrinsicElements,
+  React.ComponentType<MotionHTMLProps>
+>();
+
+const getMotionComponent = (element: keyof JSX.IntrinsicElements) => {
+  let component = motionComponentCache.get(element);
+  if (!component) {
+    component = motion.create(element);
+    motionComponentCache.set(element, component);
+  }
+  return component;
+};
+
+export interface TextShimmerProps {
+  children: string;
+  as?: ElementType;
+  className?: string;
+  duration?: number;
+  spread?: number;
+}
+
+const ShimmerComponent = ({
+  children,
+  as: Component = "p",
+  className,
+  duration = 2,
+  spread = 2,
+}: TextShimmerProps) => {
+  const MotionComponent = getMotionComponent(
+    Component as keyof JSX.IntrinsicElements
+  );
+
+  const dynamicSpread = useMemo(
+    () => (children?.length ?? 0) * spread,
+    [children, spread]
+  );
+
+  return (
+    <MotionComponent
+      animate={{ backgroundPosition: "0% center" }}
+      className={cn(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+        className
+      )}
+      initial={{ backgroundPosition: "100% center" }}
+      style={
+        {
+          "--spread": `${dynamicSpread}px`,
+          backgroundImage:
+            "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))",
+        } as CSSProperties
+      }
+      transition={{
+        duration,
+        ease: "linear",
+        repeat: Number.POSITIVE_INFINITY,
+      }}
+    >
+      {children}
+    </MotionComponent>
+  );
+};
+
+export const Shimmer = memo(ShimmerComponent);

package/src/ai-elements/suggestion.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Button } from "@houston-ai/core";
+import {
+  ScrollArea,
+  ScrollBar,
+} from "@houston-ai/core";
+import { cn } from "@houston-ai/core";
+import type { ComponentProps } from "react";
+import { useCallback } from "react";
+
+export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
+
+export const Suggestions = ({
+  className,
+  children,
+  ...props
+}: SuggestionsProps) => (
+  <ScrollArea className="w-full overflow-x-auto whitespace-nowrap" {...props}>
+    <div className={cn("flex w-max flex-nowrap items-center gap-2", className)}>
+      {children}
+    </div>
+    <ScrollBar className="hidden" orientation="horizontal" />
+  </ScrollArea>
+);
+
+export type SuggestionProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+  suggestion: string;
+  onClick?: (suggestion: string) => void;
+};
+
+export const Suggestion = ({
+  suggestion,
+  onClick,
+  className,
+  variant = "outline",
+  size = "sm",
+  children,
+  ...props
+}: SuggestionProps) => {
+  const handleClick = useCallback(() => {
+    onClick?.(suggestion);
+  }, [onClick, suggestion]);
+
+  return (
+    <Button
+      className={cn("cursor-pointer rounded-full px-4", className)}
+      onClick={handleClick}
+      size={size}
+      type="button"
+      variant={variant}
+      {...props}
+    >
+      {children || suggestion}
+    </Button>
+  );
+};

package/src/channel-avatar.tsx

@@ -0,0 +1,57 @@
+import { cn } from "@houston-ai/core";
+
+export type ChannelSource = "telegram" | "slack" | "desktop" | string;
+
+interface ChannelAvatarProps {
+  source: ChannelSource;
+  size?: "sm" | "md";
+  className?: string;
+}
+
+/**
+ * Small branded avatar for messaging channel sources.
+ * Shows the platform logo in a circular badge.
+ */
+export function ChannelAvatar({ source, size = "sm", className }: ChannelAvatarProps) {
+  const sizeClass = size === "sm" ? "size-6" : "size-8";
+  const iconSize = size === "sm" ? 14 : 18;
+
+  return (
+    <div
+      className={cn(
+        "rounded-full flex items-center justify-center shrink-0",
+        source === "telegram" && "bg-[#2AABEE]",
+        source === "slack" && "bg-[#4A154B]",
+        !["telegram", "slack"].includes(source) && "bg-muted",
+        sizeClass,
+        className,
+      )}
+      title={source.charAt(0).toUpperCase() + source.slice(1)}
+    >
+      {source === "telegram" && <TelegramIcon size={iconSize} />}
+      {source === "slack" && <SlackIcon size={iconSize} />}
+    </div>
+  );
+}
+
+function TelegramIcon({ size }: { size: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path
+        d="M20.665 3.717l-17.73 6.837c-1.21.486-1.203 1.161-.222 1.462l4.552 1.42 10.532-6.645c.498-.303.953-.14.579.192l-8.533 7.701h-.002l.002.001-.314 4.692c.46 0 .663-.211.921-.46l2.211-2.15 4.599 3.397c.848.467 1.457.227 1.668-.785l3.019-14.228c.309-1.239-.473-1.8-1.282-1.434z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+function SlackIcon({ size }: { size: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" fill="#E01E5A"/>
+      <path d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" fill="#36C5F0"/>
+      <path d="M18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.27 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.163 0a2.528 2.528 0 0 1 2.523 2.522v6.312z" fill="#2EB67D"/>
+      <path d="M15.163 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.163 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.27a2.527 2.527 0 0 1-2.52-2.523 2.527 2.527 0 0 1 2.52-2.52h6.315A2.528 2.528 0 0 1 24 15.163a2.528 2.528 0 0 1-2.522 2.523h-6.315z" fill="#ECB22E"/>
+    </svg>
+  );
+}

package/src/chat-helpers.tsx

@@ -0,0 +1,239 @@
+/**
+ * Chat helper components -- tool activity display.
+ *
+ * Generic version: no Houston-specific tool detection. Consumers can provide
+ * custom tool mappings or a renderToolResult render prop to handle
+ * application-specific tool results.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import type { ToolEntry } from "./feed-to-messages";
+import { Loader2, CheckIcon } from "lucide-react";
+
+// Re-export types and conversion for convenient imports
+export type { ToolEntry, ChatMessage } from "./feed-to-messages";
+export { feedItemsToMessages } from "./feed-to-messages";
+
+// ---------------------------------------------------------------------------
+// ToolActivity -- shows tool usage with a live, alive feel
+// ---------------------------------------------------------------------------
+
+const DEFAULT_TOOL_LABELS: Record<string, string> = {
+  Read: "Reading file",
+  Write: "Writing file",
+  Edit: "Editing file",
+  Bash: "Running command",
+  Glob: "Searching files",
+  Grep: "Searching code",
+  WebSearch: "Searching the web",
+  WebFetch: "Fetching page",
+  ToolSearch: "Looking up tools",
+};
+
+function humanizeToolName(
+  name: string,
+  customLabels?: Record<string, string>,
+): string {
+  const short = name.includes("__") ? name.split("__").pop()! : name;
+  const labels = { ...DEFAULT_TOOL_LABELS, ...customLabels };
+  return labels[short] || short.replace(/_/g, " ");
+}
+
+interface CollapsedTool {
+  name: string;
+  count: number;
+  hasResult: boolean;
+  /** The input of the last tool in the group (shown when active) */
+  lastInput?: Record<string, unknown>;
+}
+
+function collapseToolEntries(tools: ToolEntry[]): CollapsedTool[] {
+  const result: CollapsedTool[] = [];
+  for (const tool of tools) {
+    const last = result[result.length - 1];
+    if (last && last.name === tool.name) {
+      last.count++;
+      if (tool.result) last.hasResult = true;
+      last.lastInput = tool.input as Record<string, unknown> | undefined;
+    } else {
+      result.push({
+        name: tool.name,
+        count: 1,
+        hasResult: !!tool.result,
+        lastInput: tool.input as Record<string, unknown> | undefined,
+      });
+    }
+  }
+  return result;
+}
+
+/**
+ * Split collapsed entries into completed groups + the active tool.
+ * When the last entry in a group is still running (no result, streaming),
+ * peel it off as a separate "active" item so the user sees:
+ *   [check] Running command 23x
+ *   [spinner] Running command — npm install
+ */
+function splitActive(
+  collapsed: CollapsedTool[],
+  isStreaming: boolean,
+): { completed: CollapsedTool[]; active: CollapsedTool | null } {
+  if (!isStreaming || collapsed.length === 0) {
+    return { completed: collapsed, active: null };
+  }
+  const last = collapsed[collapsed.length - 1];
+  if (last.hasResult) {
+    return { completed: collapsed, active: null };
+  }
+  // Peel the active tool off the last group
+  if (last.count > 1) {
+    const completedLast = { ...last, count: last.count - 1, hasResult: true };
+    const activeTool = { ...last, count: 1, hasResult: false };
+    return {
+      completed: [...collapsed.slice(0, -1), completedLast],
+      active: activeTool,
+    };
+  }
+  return {
+    completed: collapsed.slice(0, -1),
+    active: last,
+  };
+}
+
+export interface ToolActivityProps {
+  tools: ToolEntry[];
+  isStreaming: boolean;
+  /** Custom tool name → human label mappings, merged with defaults */
+  toolLabels?: Record<string, string>;
+}
+
+/** Extract a short detail string from tool input for display. */
+function toolDetail(input?: Record<string, unknown>): string | null {
+  if (!input) return null;
+  // Bash: show command
+  if (typeof input.command === "string") {
+    const cmd = input.command as string;
+    return cmd.length > 60 ? cmd.slice(0, 57) + "..." : cmd;
+  }
+  // Read/Write/Edit: show file path
+  if (typeof input.file_path === "string") {
+    const fp = input.file_path as string;
+    const parts = fp.split("/");
+    return parts.length > 2 ? parts.slice(-2).join("/") : fp;
+  }
+  // Grep/Glob: show pattern
+  if (typeof input.pattern === "string") return input.pattern as string;
+  return null;
+}
+
+export function ToolActivity({
+  tools,
+  isStreaming,
+  toolLabels,
+}: ToolActivityProps) {
+  const [elapsed, setElapsed] = useState(0);
+  const startRef = useRef(Date.now());
+
+  useEffect(() => {
+    if (!isStreaming) return;
+    startRef.current = Date.now();
+    const interval = setInterval(() => {
+      setElapsed(Math.floor((Date.now() - startRef.current) / 1000));
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [isStreaming]);
+
+  const collapsed = collapseToolEntries(tools);
+  const { completed, active } = splitActive(collapsed, isStreaming);
+
+  return (
+    <div className="space-y-0.5 py-1">
+      {completed.map((item, i) => (
+        <div
+          key={i}
+          className="flex items-center gap-2 text-xs py-0.5 text-muted-foreground/40"
+        >
+          <CheckIcon className="size-3 text-muted-foreground/30 shrink-0" />
+          <span>{humanizeToolName(item.name, toolLabels)}</span>
+          {item.count > 1 && (
+            <span className="text-muted-foreground/30">{item.count}x</span>
+          )}
+        </div>
+      ))}
+      {active && (
+        <div className="flex items-center gap-2 text-xs py-0.5 text-foreground/70">
+          <Loader2 className="size-3 animate-spin text-foreground/40 shrink-0" />
+          <span className="font-medium">
+            {humanizeToolName(active.name, toolLabels)}
+          </span>
+          {toolDetail(active.lastInput) && (
+            <span className="text-muted-foreground/40 truncate max-w-[300px]">
+              {toolDetail(active.lastInput)}
+            </span>
+          )}
+        </div>
+      )}
+      {isStreaming && tools.length > 0 && (
+        <div className="text-[10px] text-muted-foreground/30 pl-5 pt-0.5">
+          {tools.length} {tools.length === 1 ? "step" : "steps"} · {elapsed}s
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ToolsAndCards -- generic version with optional custom tool result rendering
+// ---------------------------------------------------------------------------
+
+export interface ToolsAndCardsProps {
+  tools: ToolEntry[];
+  isStreaming: boolean;
+  /** Custom tool name → human label mappings for ToolActivity */
+  toolLabels?: Record<string, string>;
+  /**
+   * Predicate to identify "special" tools that should be rendered via
+   * renderToolResult instead of the default ToolActivity list.
+   * Defaults to returning false (all tools shown in ToolActivity).
+   */
+  isSpecialTool?: (toolName: string) => boolean;
+  /**
+   * Render prop for special tool results. Called for each tool where
+   * isSpecialTool returns true and the tool has a result.
+   */
+  renderToolResult?: (tool: ToolEntry, index: number) => ReactNode;
+}
+
+export function ToolsAndCards({
+  tools,
+  isStreaming,
+  toolLabels,
+  isSpecialTool,
+  renderToolResult,
+}: ToolsAndCardsProps) {
+  const specialTools = isSpecialTool
+    ? tools.filter((t) => isSpecialTool(t.name) && t.result)
+    : [];
+  const otherTools = isSpecialTool
+    ? tools.filter((t) => !isSpecialTool(t.name))
+    : tools;
+
+  return (
+    <>
+      {otherTools.length > 0 && (
+        <ToolActivity
+          tools={otherTools}
+          isStreaming={isStreaming}
+          toolLabels={toolLabels}
+        />
+      )}
+      {renderToolResult &&
+        specialTools.map((t, i) => (
+          <div key={`special-${i}`} className="py-3">
+            {renderToolResult(t, i)}
+          </div>
+        ))}
+    </>
+  );
+}