@springbrand/message-panel 0.1.2 → 0.1.3-alpha.1

package/src/camel/camel-model-select.tsx

@@ -0,0 +1,88 @@
+import { CheckIcon, ChevronDownIcon, ZapIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
+
+export interface CamelModelOption {
+  value: string;
+  label: string;
+  hint?: string;
+}
+
+export interface CamelModelSelectProps {
+  value: string;
+  options: readonly CamelModelOption[];
+  disabled?: boolean;
+  label?: string;
+  onValueChange: (value: string) => void;
+}
+
+export function CamelModelSelect({
+  value,
+  options,
+  disabled,
+  label = "Select model",
+  onValueChange,
+}: CamelModelSelectProps) {
+  const selected = options.find((option) => option.value === value);
+
+  return (
+    <SelectPrimitive.Root
+      value={value}
+      disabled={disabled}
+      onValueChange={onValueChange}
+    >
+      <SelectPrimitive.Trigger
+        data-camel-model-select=""
+        aria-label={label}
+        title={label}
+        className="inline-flex h-8 max-w-60 shrink-0 items-center justify-center gap-1.5 rounded-md px-1.5 text-sm font-medium text-foreground/90 outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
+      >
+        <ZapIcon
+          className="size-[17px] shrink-0 text-foreground/90"
+          strokeWidth={1.8}
+        />
+        <SelectPrimitive.Value className="max-w-40 truncate text-[15px]">
+          {selected?.label ?? value}
+        </SelectPrimitive.Value>
+        <SelectPrimitive.Icon asChild>
+          <ChevronDownIcon
+            className="size-4 shrink-0 text-muted-foreground"
+            strokeWidth={1.8}
+          />
+        </SelectPrimitive.Icon>
+      </SelectPrimitive.Trigger>
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+          data-camel-model-select-content=""
+          position="popper"
+          align="start"
+          sideOffset={4}
+          className="z-50 w-72 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+        >
+          <SelectPrimitive.Viewport className="max-h-80 overflow-y-auto p-1">
+            {options.map((option) => (
+              <SelectPrimitive.Item
+                key={option.value}
+                value={option.value}
+                className="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+              >
+                <SelectPrimitive.ItemText className="w-full">
+                  <span className="flex min-w-0 items-center justify-between gap-3">
+                    <span className="truncate">{option.label}</span>
+                    {option.hint && (
+                      <span className="shrink-0 text-xs text-muted-foreground">
+                        {option.hint}
+                      </span>
+                    )}
+                  </span>
+                </SelectPrimitive.ItemText>
+                <SelectPrimitive.ItemIndicator className="absolute right-2 flex size-4 items-center justify-center">
+                  <CheckIcon className="size-4" />
+                </SelectPrimitive.ItemIndicator>
+              </SelectPrimitive.Item>
+            ))}
+          </SelectPrimitive.Viewport>
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  );
+}

package/src/camel/camel-plan-bar.tsx

@@ -0,0 +1,115 @@
+import type { UIMessage } from "ai";
+import { CheckIcon, ChevronDownIcon, CircleIcon } from "lucide-react";
+import { useId, useMemo, useState } from "react";
+import { cn } from "../internal/cn";
+import { projectLatestPlan } from "../parts/plan";
+
+export interface CamelPlanBarProps {
+  messages: readonly UIMessage[];
+}
+
+export function CamelPlanBar({ messages }: CamelPlanBarProps) {
+  const [open, setOpen] = useState(false);
+  const contentId = useId();
+  const steps = useMemo(() => projectLatestPlan(messages), [messages]);
+
+  if (!steps || steps.length === 0) return null;
+
+  const doneCount = steps.filter((step) => step.status === "done").length;
+  const activeIndex = steps.findIndex((step) => step.status !== "done");
+  const allDone = activeIndex === -1;
+  const headline = steps[allDone ? steps.length - 1 : activeIndex]!;
+
+  return (
+    <section
+      className="shrink-0 bg-background px-4 pt-2"
+      data-camel-plan-bar=""
+      aria-label="Task progress"
+    >
+      <div className="mx-auto w-full max-w-3xl rounded-2xl border border-border bg-card shadow-[0_8px_16px_rgb(0_0_0/0.12)]">
+        <button
+          type="button"
+          className="group flex w-full items-center gap-2 rounded-2xl px-4 py-2.5 text-left"
+          aria-expanded={open}
+          aria-controls={contentId}
+          onClick={() => setOpen((current) => !current)}
+        >
+          <span className="relative flex h-5 min-w-0 flex-1 items-center gap-2 overflow-hidden">
+            {allDone ? (
+              <CheckIcon className="size-4 shrink-0 text-success" />
+            ) : (
+              <span className="flex size-4 shrink-0 items-center justify-center">
+                <span className="size-2 animate-manus-pulse rounded-full bg-primary" />
+              </span>
+            )}
+            <span
+              className="min-w-0 truncate text-sm text-foreground"
+              title={headline.text}
+            >
+              {headline.text}
+            </span>
+          </span>
+          <span className="shrink-0 text-[13px] tabular-nums text-muted-foreground">
+            {doneCount} / {steps.length}
+          </span>
+          <ChevronDownIcon
+            className={cn(
+              "size-4 shrink-0 text-muted-foreground transition-transform duration-200",
+              open && "rotate-180",
+            )}
+          />
+        </button>
+        <div
+          id={contentId}
+          data-camel-plan-content=""
+          data-camel-collapsible-content=""
+          data-state={open ? "open" : "closed"}
+          aria-hidden={!open}
+          inert={!open ? true : undefined}
+        >
+          <div
+            data-camel-collapsible-inner=""
+          >
+            <div className="px-4 pb-3">
+              <p className="text-[13px] text-muted-foreground">Task progress</p>
+              <div className="mt-2 max-h-72 space-y-2 overflow-y-auto overflow-x-hidden">
+                {steps.map((step, index) => {
+                  const active = !allDone && index === activeIndex;
+                  return (
+                    <div
+                      key={`${index}:${step.text}`}
+                      className="flex w-full min-w-0 items-center gap-2"
+                    >
+                      <span className="flex h-5 w-4 shrink-0 items-center justify-center">
+                        {step.status === "done" ? (
+                          <CheckIcon className="size-4 text-success" />
+                        ) : active ? (
+                          <span className="size-2 animate-manus-pulse rounded-full bg-primary" />
+                        ) : (
+                          <CircleIcon className="size-3.5 text-muted-foreground/40" />
+                        )}
+                      </span>
+                      <span
+                        className={cn(
+                          "min-w-0 flex-1 truncate text-sm",
+                          active
+                            ? "font-medium text-foreground"
+                            : step.status === "done"
+                              ? "text-foreground"
+                              : "text-muted-foreground",
+                        )}
+                        title={step.text}
+                      >
+                        {step.text}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}