larkup 0.4.12 → 0.4.14

package/.next/standalone/apps/web/components/chat/message-queue.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { ChevronUp, ChevronDown, Trash2, Paperclip } from 'lucide-react';
+
+export interface QueuedMessage {
+  id: string;
+  text: string;
+  files?: File[];
+}
+
+interface MessageQueueProps {
+  items: QueuedMessage[];
+  onRemove: (id: string) => void;
+  onMoveUp: (id: string) => void;
+  onMoveDown: (id: string) => void;
+  onEdit: (id: string) => void;
+}
+
+export function MessageQueue({ items, onRemove, onMoveUp, onMoveDown, onEdit }: MessageQueueProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <div className="mx-auto mb-2 w-full max-w-3xl overflow-hidden rounded-2xl border border-border bg-card">
+      <div className="border-b border-border/60 px-3 py-1.5">
+        <span className="text-xs font-medium text-muted-foreground">
+          {items.length} queued message{items.length > 1 ? 's' : ''}
+        </span>
+      </div>
+      <ul className="max-h-40 overflow-y-auto scrollbar-none [&::-webkit-scrollbar]:hidden">
+        {items.map((item, index) => (
+          <li
+            key={item.id}
+            className="group flex items-start gap-2 border-border/40 px-3 py-2 text-sm transition-colors last:border-b-0 hover:bg-secondary"
+          >
+            <button
+              type="button"
+              onClick={() => onEdit(item.id)}
+              className="min-w-0 flex-1 cursor-pointer text-left"
+              title="Click to edit"
+            >
+              <p className="line-clamp-2 break-words text-foreground">
+                {item.text || '(attachment only)'}
+              </p>
+              {item.files && item.files.length > 0 && (
+                <div className="mt-1 flex items-center gap-1 text-muted-foreground">
+                  <Paperclip className="size-3 shrink-0" />
+                  <span className="truncate text-xs">
+                    {item.files.map((f) => f.name).join(', ')}
+                  </span>
+                </div>
+              )}
+            </button>
+            <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+              <button
+                type="button"
+                onClick={() => onMoveUp(item.id)}
+                disabled={index === 0}
+                className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition hover:bg-muted-foreground/10 hover:text-foreground disabled:pointer-events-none disabled:opacity-30"
+                aria-label="Move up in queue"
+              >
+                <ChevronUp className="size-3.5" />
+              </button>
+              <button
+                type="button"
+                onClick={() => onMoveDown(item.id)}
+                disabled={index === items.length - 1}
+                className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition hover:bg-muted-foreground/10 hover:text-foreground disabled:pointer-events-none disabled:opacity-30"
+                aria-label="Move down in queue"
+              >
+                <ChevronDown className="size-3.5" />
+              </button>
+              <button
+                type="button"
+                onClick={() => onRemove(item.id)}
+                className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
+                aria-label="Remove from queue"
+              >
+                <Trash2 className="size-3.5" />
+              </button>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/.next/standalone/apps/web/components/chat/reasoning.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import { createContext, useContext, useEffect, useRef, useState, type ReactNode } from 'react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Brain, ChevronDown, Cpu } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface ReasoningContextValue {
+  isStreaming: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  duration: number | undefined;
+}
+
+const ReasoningContext = createContext<ReasoningContextValue | null>(null);
+
+export function useReasoning() {
+  const ctx = useContext(ReasoningContext);
+  if (!ctx) throw new Error('useReasoning must be used within <Reasoning>');
+  return ctx;
+}
+
+interface ReasoningProps {
+  isStreaming?: boolean;
+  children: ReactNode;
+  className?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  duration?: number;
+}
+
+export function Reasoning({
+  isStreaming = false,
+  children,
+  className,
+  open: controlledOpen,
+  defaultOpen = true,
+  onOpenChange,
+  duration: controlledDuration,
+}: ReasoningProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = controlledOpen ?? internalOpen;
+  const setIsOpen = onOpenChange ?? setInternalOpen;
+
+  /* Auto-open when streaming starts, auto-close when streaming ends */
+  const wasStreamingRef = useRef(false);
+  useEffect(() => {
+    if (isStreaming && !wasStreamingRef.current) {
+      setIsOpen(true);
+    }
+    if (!isStreaming && wasStreamingRef.current) {
+      setIsOpen(false);
+    }
+    wasStreamingRef.current = isStreaming;
+  }, [isStreaming, setIsOpen]);
+
+  /* Duration timer */
+  const [elapsed, setElapsed] = useState<number | undefined>(undefined);
+  const startRef = useRef<number | null>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    if (isStreaming) {
+      if (startRef.current === null) startRef.current = Date.now();
+      intervalRef.current = setInterval(() => {
+        if (startRef.current !== null) {
+          setElapsed(Math.round((Date.now() - startRef.current) / 1000));
+        }
+      }, 1000);
+    } else {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      // Freeze elapsed at final value
+    }
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [isStreaming]);
+
+  const duration = controlledDuration ?? elapsed;
+
+  return (
+    <ReasoningContext.Provider value={{ isStreaming, isOpen, setIsOpen, duration }}>
+      <Collapsible open={isOpen} onOpenChange={setIsOpen} className={cn('mb-2 w-full', className)}>
+        {children}
+      </Collapsible>
+    </ReasoningContext.Provider>
+  );
+}
+
+interface ReasoningTriggerProps {
+  className?: string;
+  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+}
+
+function formatDuration(seconds?: number): string {
+  if (seconds === undefined || seconds === 0) return '';
+  if (seconds < 60) return `${seconds}s`;
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`;
+}
+
+export function ReasoningTrigger({ className, getThinkingMessage }: ReasoningTriggerProps) {
+  const { isStreaming, isOpen, duration } = useReasoning();
+
+  const defaultMessage = isStreaming
+    ? 'Thinking…'
+    : duration && duration > 0
+      ? `Thought for ${formatDuration(duration)}`
+      : 'Thought for a moment';
+
+  const message = getThinkingMessage ? getThinkingMessage(isStreaming, duration) : defaultMessage;
+
+  return (
+    <CollapsibleTrigger
+      className={cn(
+        'flex w-fit items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground',
+        className,
+      )}
+    >
+      <Cpu
+        className={cn(
+          'size-4 shrink-0 text-[#f3c756]',
+          isStreaming && 'animate-pulse text-primary/70',
+        )}
+      />
+      <span className={cn(isStreaming && 'animate-pulse')}>{message}</span>
+      <ChevronDown
+        className={cn(
+          'size-3.5 shrink-0 transition-transform duration-200 ml-auto',
+          isOpen && 'rotate-180',
+        )}
+      />
+    </CollapsibleTrigger>
+  );
+}
+
+interface ReasoningContentProps {
+  children: string;
+  className?: string;
+}
+
+export function ReasoningContent({ children, className }: ReasoningContentProps) {
+  const { isStreaming } = useReasoning();
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  /* Auto-scroll to bottom while streaming */
+  useEffect(() => {
+    if (isStreaming && contentRef.current) {
+      contentRef.current.scrollTop = contentRef.current.scrollHeight;
+    }
+  }, [isStreaming, children]);
+
+  if (!children) return null;
+
+  return (
+    <CollapsibleContent
+      className={cn(
+        'overflow-hidden',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2',
+        className,
+      )}
+    >
+      <div
+        ref={contentRef}
+        className={cn(
+          'mt-2 max-h-60 overflow-y-auto rounded-lg  px-4 py-3',
+          'text-sm leading-relaxed text-muted-foreground whitespace-pre-wrap',
+          isStreaming && 'border-primary/20',
+        )}
+      >
+        {children}
+      </div>
+    </CollapsibleContent>
+  );
+}

package/.next/standalone/apps/web/components/chat/tools/chat-card.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export interface ChatCardConfig {
+  title: string;
+  subtitle?: string;
+  icon?: React.ReactNode;
+  collapsible?: boolean;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+/**
+ * A collapsible content card for chat responses.
+ * Inspired by the "Risk Mitigation & Governance" section style from the screenshot.
+ */
+export function ChatCard({ config }: { config: ChatCardConfig }) {
+  const { title, subtitle, icon, collapsible = true, defaultOpen = true, children } = config;
+
+  const [open, setOpen] = useState(defaultOpen);
+
+  const headerContent = (
+    <div className="flex items-center gap-2.5 min-w-0">
+      {icon && <span className="shrink-0 text-muted-foreground [&_svg]:size-4">{icon}</span>}
+      <div className="min-w-0 flex-1">
+        <h3 className="text-sm font-semibold text-foreground truncate">{title}</h3>
+        {subtitle && <p className="text-xs text-muted-foreground mt-0.5 truncate">{subtitle}</p>}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="overflow-hidden rounded-xl border border-border/40 bg-card/30 my-4 animate-in fade-in slide-in-from-bottom-2 duration-500">
+      {/* Header */}
+      {collapsible ? (
+        <button
+          type="button"
+          onClick={() => setOpen((o) => !o)}
+          className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/10 focus:outline-none focus-visible:outline-none"
+        >
+          {headerContent}
+          <ChevronDown
+            className={cn(
+              'size-4 shrink-0 text-muted-foreground transition-transform duration-200',
+              open && 'rotate-180',
+            )}
+          />
+        </button>
+      ) : (
+        <div className="flex items-center gap-3 px-4 py-3">{headerContent}</div>
+      )}
+
+      {/* Content */}
+      {open && (
+        <div className="border-t border-border/30 animate-in fade-in slide-in-from-top-1 duration-300">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* Tool-card helpers. */
+/* Simplified functional API — no config wrapper needed                 */
+/* End tool-card helpers. */
+
+export function ChatCardSimple({
+  title,
+  subtitle,
+  icon,
+  collapsible = true,
+  defaultOpen = true,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  icon?: React.ReactNode;
+  collapsible?: boolean;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <ChatCard
+      config={{
+        title,
+        subtitle,
+        icon,
+        collapsible,
+        defaultOpen,
+        children,
+      }}
+    />
+  );
+}