@springbrand/message-panel 0.1.0 → 0.1.2

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

@@ -1,88 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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>
-  );
-}