@springbrand/message-panel 0.1.0

package/src/status.tsx

@@ -0,0 +1,132 @@
+import { useEffect, useRef, useState } from "react";
+import { ThinkingOrb, type OrbState } from "thinking-orbs";
+import type { MessagePanelStatus } from "./contracts";
+import { cn } from "./internal/cn";
+import { resolvePartKind, toolNameOfPart } from "./parts/kind";
+
+export type PanelVisualState =
+  | "empty"
+  | "hydrating"
+  | "thinking"
+  | "streaming"
+  | "ready"
+  | "error"
+  | "recovering"
+  | "background";
+
+export function derivePanelVisualState({
+  messageCount,
+  status,
+  isHydrating = false,
+  isRecovering = false,
+  isServerStreaming = false,
+}: {
+  messageCount: number;
+  status: MessagePanelStatus;
+  isHydrating?: boolean;
+  isRecovering?: boolean;
+  isServerStreaming?: boolean;
+}): PanelVisualState {
+  if (isHydrating) return "hydrating";
+  if (status === "error") return "error";
+  if (isRecovering) return "recovering";
+  if (isServerStreaming) return "background";
+  if (status === "submitted") return "thinking";
+  if (status === "streaming") return "streaming";
+  return messageCount === 0 ? "empty" : "ready";
+}
+
+export function ThinkingIndicator({
+  label = "Thinking…",
+  state = "solving",
+  className,
+}: {
+  label?: string;
+  state?: OrbState;
+  className?: string;
+}) {
+  return (
+    <div className={cn("sb-thinking", className)} role="status" aria-label={label}>
+      <ThinkingOrb state={state} size={20} aria-hidden="true" />
+      <span>{label}</span>
+    </div>
+  );
+}
+
+export function deriveThinkingActivity(part?: unknown): {
+  state: OrbState;
+  label: string;
+} {
+  const kind = resolvePartKind(part);
+  const toolName = toolNameOfPart(part);
+  if (kind === "reasoning") return { state: "solving", label: "Reasoning…" };
+  if (kind === "text") return { state: "composing", label: "Composing answer…" };
+  if (
+    ["plan", "image", "chart", "dashboard"].includes(kind ?? "") ||
+    (toolName != null &&
+      /(?:^|[_-])(?:image|chart|artifact|render|write_file)(?:$|[_-])/i.test(
+        toolName,
+      ))
+  ) {
+    return { state: "shaping", label: "Shaping result…" };
+  }
+  if (
+    toolName != null &&
+    /(?:^|[_-])(?:search|fetch|browse|browser|web)(?:$|[_-])/i.test(toolName)
+  ) {
+    return { state: "searching", label: "Searching…" };
+  }
+  if (toolName != null) {
+    return {
+      state: "working",
+      label: `Running ${toolName.replaceAll("_", " ")}…`,
+    };
+  }
+  return part === undefined
+    ? { state: "solving", label: "Thinking…" }
+    : { state: "working", label: "Working…" };
+}
+
+type LoadingPhase = "idle" | "loading" | "done";
+
+export function TopLoadingBar({ status }: { status: MessagePanelStatus }) {
+  const [phase, setPhase] = useState<LoadingPhase>("idle");
+  const previous = useRef(status);
+
+  useEffect(() => {
+    const before = previous.current;
+    previous.current = status;
+    if (status === "submitted") {
+      setPhase("loading");
+      return;
+    }
+    if (before === "submitted" && status === "streaming") {
+      setPhase("done");
+      const timeout = window.setTimeout(() => setPhase("idle"), 500);
+      return () => window.clearTimeout(timeout);
+    }
+    if (status !== "streaming") setPhase("idle");
+  }, [status]);
+
+  if (phase === "idle") return null;
+  return (
+    <div className="sb-top-loading" role="progressbar" aria-label="等待响应">
+      <span data-phase={phase} />
+    </div>
+  );
+}
+
+export function PanelStatus({
+  kind,
+  children,
+}: {
+  kind: "hydrating" | "recovering" | "background" | "error";
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="sb-panel-status" data-kind={kind} role={kind === "error" ? "alert" : "status"}>
+      <span aria-hidden="true" />
+      {children}
+    </div>
+  );
+}

package/src/styles/camel-chat.css

@@ -0,0 +1,36 @@
+/* Streamdown inherits the app's shadcn tokens, as recommended by assistant-ui. */
+.camel-chat-surface {
+  font-size: 14px;
+}
+
+.camel-chat-surface [data-camel-collapsible-content] {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    grid-template-rows 200ms ease-in,
+    opacity 150ms ease-in,
+    visibility 0s linear 200ms;
+}
+
+.camel-chat-surface [data-camel-collapsible-inner] {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.camel-chat-surface
+  [data-camel-collapsible-content][data-state="open"] {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  visibility: visible;
+  transition:
+    grid-template-rows 250ms ease-out,
+    opacity 200ms ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .camel-chat-surface [data-camel-collapsible-content] {
+    transition: none !important;
+  }
+}