iris-chatbot 0.2.4

package/template/src/components/Composer.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+import { ArrowUp, Loader2, Mic, Square } from "lucide-react";
+
+function normalizePastedText(input: string): string {
+  return input
+    .replace(/\r\n?/g, "\n")
+    .replace(/\u200B/g, "")
+    .replace(/[ \t]+\n/g, "\n")
+    .replace(/\n{3,}/g, "\n\n")
+    .replace(/\n+$/g, "");
+}
+
+export default function Composer({
+  value,
+  onChange,
+  onSend,
+  onStop,
+  isStreaming,
+  onMicToggle,
+  micState = "idle",
+  micDisabled = false,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  onSend: () => void;
+  onStop: () => void;
+  isStreaming: boolean;
+  onMicToggle?: () => void;
+  micState?: "idle" | "listening" | "processing";
+  micDisabled?: boolean;
+}) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const minRowsRef = useRef(1);
+  const maxRowsRef = useRef(8);
+  const hasText = value.trim().length > 0;
+  const micButtonTitle =
+    micState === "listening"
+      ? "Stop dictation"
+      : micState === "processing"
+        ? "Processing dictation"
+        : "Start dictation";
+  const insertAtCursor = useCallback(
+    (insertText: string) => {
+      const element = textareaRef.current;
+      if (!element) {
+        onChange(value + insertText);
+        return;
+      }
+      const start = element.selectionStart ?? value.length;
+      const end = element.selectionEnd ?? start;
+      const nextValue = `${value.slice(0, start)}${insertText}${value.slice(end)}`;
+      onChange(nextValue);
+      const nextCursor = start + insertText.length;
+      requestAnimationFrame(() => {
+        if (!textareaRef.current) {
+          return;
+        }
+        textareaRef.current.focus();
+        textareaRef.current.setSelectionRange(nextCursor, nextCursor);
+      });
+    },
+    [onChange, value],
+  );
+
+  const resizeTextarea = useCallback(() => {
+    const element = textareaRef.current;
+    if (!element) {
+      return;
+    }
+
+    const style = window.getComputedStyle(element);
+    const lineHeight = Number.parseFloat(style.lineHeight) || 22;
+    const paddingTop = Number.parseFloat(style.paddingTop) || 0;
+    const paddingBottom = Number.parseFloat(style.paddingBottom) || 0;
+
+    const minHeight = lineHeight * minRowsRef.current + paddingTop + paddingBottom;
+    const maxHeight = lineHeight * maxRowsRef.current + paddingTop + paddingBottom;
+
+    // Use scrollHeight so wrapped lines (no explicit newline) are included; min 1 line, max 8
+    element.style.height = "0px";
+    const scrollHeight = element.scrollHeight;
+    const nextHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
+    element.style.height = `${nextHeight}px`;
+    element.style.overflowY = scrollHeight > maxHeight ? "auto" : "hidden";
+  }, []);
+
+  useLayoutEffect(() => {
+    resizeTextarea();
+  }, [value, resizeTextarea]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      resizeTextarea();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [resizeTextarea]);
+
+  return (
+    <div className="composer flex items-end gap-3">
+      <textarea
+        ref={textareaRef}
+        rows={1}
+        className="composer-textarea flex-1 text-base text-[var(--text-primary)]"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        onPaste={(event) => {
+          const clipboardText = event.clipboardData.getData("text/plain");
+          if (!clipboardText) {
+            return;
+          }
+          event.preventDefault();
+          insertAtCursor(normalizePastedText(clipboardText));
+        }}
+        placeholder="Ask anything"
+        onKeyDown={(event) => {
+          if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            if (!isStreaming) onSend();
+          }
+        }}
+      />
+      {onMicToggle ? (
+        <button
+          onClick={onMicToggle}
+          className={`send-button mic-button shrink-0 ${micState !== "idle" ? "active" : ""}`}
+          disabled={micDisabled || micState === "processing"}
+          title={micButtonTitle}
+          aria-label={micButtonTitle}
+        >
+          {micState === "processing" ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Mic className="h-4 w-4" />
+          )}
+        </button>
+      ) : null}
+      {isStreaming ? (
+        <button
+          onClick={onStop}
+          className="flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 text-xs text-[var(--text-secondary)]"
+        >
+          <Square className="h-3 w-3" />
+          Stop
+        </button>
+      ) : (
+        <button
+          onClick={onSend}
+          className={`send-button shrink-0 ${hasText ? "active" : ""}`}
+        >
+          <ArrowUp className="h-4 w-4" />
+        </button>
+      )}
+    </div>
+  );
+}

package/template/src/components/MapView.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import dagre from "dagre";
+import ReactFlow, {
+  Background,
+  type Edge,
+  type Node,
+  type ReactFlowInstance,
+} from "reactflow";
+import type { MessageNode, Thread } from "../lib/types";
+import { buildPathIds, splitContentAndSources } from "../lib/utils";
+import { createThreadFromMessage } from "../lib/data";
+import { useUIStore } from "../lib/store";
+
+const NODE_WIDTH = 220;
+const NODE_HEIGHT = 80;
+
+const graph = new dagre.graphlib.Graph();
+graph.setDefaultEdgeLabel(() => ({}));
+
+function layoutElements(nodes: Node[], edges: Edge[]) {
+  graph.setGraph({ rankdir: "TB", nodesep: 24, ranksep: 60 });
+
+  nodes.forEach((node) => {
+    graph.setNode(node.id, { width: NODE_WIDTH, height: NODE_HEIGHT });
+  });
+
+  edges.forEach((edge) => {
+    graph.setEdge(edge.source, edge.target);
+  });
+
+  dagre.layout(graph);
+
+  const layoutedNodes = nodes.map((node) => {
+    const { x, y } = graph.node(node.id);
+    return {
+      ...node,
+      position: { x: x - NODE_WIDTH / 2, y: y - NODE_HEIGHT / 2 },
+    };
+  });
+
+  return { nodes: layoutedNodes, edges };
+}
+
+export default function MapView({
+  threads,
+  activeThreadId,
+  messages,
+  onSelectThread,
+  onNavigateToChat,
+}: {
+  threads: Thread[];
+  activeThreadId: string | null;
+  messages: MessageNode[];
+  onSelectThread: (id: string) => void;
+  onNavigateToChat: () => void;
+}) {
+  const flowRef = useRef<ReactFlowInstance | null>(null);
+  const setFocusedMessageId = useUIStore((state) => state.setFocusedMessageId);
+  const activeThread = threads.find((thread) => thread.id === activeThreadId) || null;
+  const conversationThreads = useMemo(
+    () =>
+      activeThread
+        ? threads.filter(
+            (thread) => thread.conversationId === activeThread.conversationId
+          )
+        : [],
+    [threads, activeThread]
+  );
+  const messageMap = useMemo(
+    () => new Map(messages.map((message) => [message.id, message])),
+    [messages]
+  );
+
+  const visibleMessageIds = useMemo(() => {
+    if (!activeThread) return new Set<string>();
+    const ids = new Set<string>();
+    conversationThreads.forEach((thread) => {
+      buildPathIds(thread.headMessageId, messageMap).forEach((id) => ids.add(id));
+    });
+    return ids;
+  }, [activeThread, conversationThreads, messageMap]);
+
+  const visibleMessages = useMemo(
+    () => messages.filter((message) => visibleMessageIds.has(message.id)),
+    [messages, visibleMessageIds]
+  );
+
+  const firstAssistantChildByUserId = useMemo(() => {
+    const map = new Map<string, MessageNode>();
+    visibleMessages.forEach((message) => {
+      if (message.role !== "assistant" || !message.parentId) return;
+      const parent = messageMap.get(message.parentId);
+      if (!parent || parent.role !== "user") return;
+      const current = map.get(parent.id);
+      if (!current || message.createdAt < current.createdAt) {
+        map.set(parent.id, message);
+      }
+    });
+    return map;
+  }, [visibleMessages, messageMap]);
+
+  const activePathIds = useMemo(
+    () => buildPathIds(activeThread?.headMessageId || null, messageMap),
+    [activeThread?.headMessageId, messageMap]
+  );
+
+  const threadPathIds = useMemo(() => {
+    return conversationThreads.map((thread) => {
+      // Precompute path once per thread for click-target matching.
+      const pathIds = buildPathIds(thread.headMessageId, messageMap);
+      return {
+        pathIds,
+        thread,
+        depth: pathIds.size,
+      };
+    });
+  }, [conversationThreads, messageMap]);
+
+  const { nodes, edges } = useMemo(() => {
+    const nodes: Node[] = visibleMessages.map((message) => {
+      const preview = splitContentAndSources(message.content).content.trim().slice(0, 60) || "(empty)";
+      const isActive = activePathIds.has(message.id);
+      const roleClass =
+        message.role === "user"
+          ? "node-user"
+          : message.role === "assistant"
+            ? "node-assistant"
+            : "node-system";
+      return {
+        id: message.id,
+        data: {
+          label: (
+            <div>
+              <div className="text-[10px] uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                {message.role}
+              </div>
+              <div className="mt-1 text-xs text-[var(--text-primary)]">
+                {preview}
+              </div>
+            </div>
+          ),
+        },
+        position: { x: 0, y: 0 },
+        className: `node-base ${roleClass} ${isActive ? "node-active" : ""}`,
+      };
+    });
+
+    const edges: Edge[] = visibleMessages
+      .filter((message) => message.parentId)
+      .map((message) => ({
+        id: `${message.parentId}-${message.id}`,
+        source: message.parentId as string,
+        target: message.id,
+        style: {
+          stroke: activePathIds.has(message.id)
+            ? "var(--accent)"
+            : "var(--border-strong)",
+          strokeWidth: 1.4,
+        },
+      }));
+
+    return layoutElements(nodes, edges);
+  }, [visibleMessages, activePathIds]);
+
+  const refitView = useCallback((duration = 0) => {
+    flowRef.current?.fitView({
+      padding: 0.2,
+      duration,
+      includeHiddenNodes: false,
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!flowRef.current) {
+      return;
+    }
+
+    // Fit immediately and once more after layout settles to avoid right-shift on view toggle.
+    refitView(0);
+    const timeoutId = window.setTimeout(() => {
+      refitView(200);
+    }, 220);
+
+    const onResize = () => refitView(0);
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [nodes, edges, activeThreadId, refitView]);
+
+  return (
+    <div className="map-shell h-full">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        fitView
+        fitViewOptions={{ padding: 0.2, includeHiddenNodes: false }}
+        onInit={(instance) => {
+          flowRef.current = instance;
+          refitView(0);
+        }}
+        onNodeClick={async (_, node) => {
+          if (!activeThread) return;
+          const clicked = messageMap.get(node.id);
+          const targetHeadId =
+            clicked?.role === "user"
+              ? firstAssistantChildByUserId.get(clicked.id)?.id ?? null
+              : node.id;
+          if (!targetHeadId) return;
+
+          const existing = threadPathIds
+            .filter(({ pathIds }) => pathIds.has(targetHeadId))
+            .sort((a, b) => b.depth - a.depth)[0]?.thread;
+          const exact = conversationThreads.find(
+            (thread) => thread.headMessageId === targetHeadId
+          );
+          try {
+            if (existing) {
+              onSelectThread(existing.id);
+            } else if (exact) {
+              onSelectThread(exact.id);
+            } else {
+              const newThread = await createThreadFromMessage(
+                targetHeadId,
+                activeThread.conversationId
+              );
+              onSelectThread(newThread.id);
+            }
+            setFocusedMessageId(node.id);
+            onNavigateToChat();
+          } catch {
+            // Ignore if thread limit reached.
+          }
+        }}
+      >
+        <Background gap={24} />
+      </ReactFlow>
+    </div>
+  );
+}