sparkecoder 0.1.16 → 0.1.18

package/web/.next/standalone/web/src/components/ai-elements/load-skill-tool.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import {
+  BookOpenIcon,
+  CheckCircleIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  ClockIcon,
+  CopyIcon,
+  ListIcon,
+  SparklesIcon,
+  XCircleIcon,
+} from "lucide-react";
+import { useState } from "react";
+
+export interface SkillInfo {
+  name: string;
+  description?: string;
+}
+
+export interface LoadSkillInput {
+  action: "list" | "load";
+  skillName?: string;
+}
+
+export interface LoadSkillOutput {
+  success?: boolean;
+  error?: string;
+  action?: string;
+  skillCount?: number;
+  skills?: SkillInfo[];
+  skillName?: string;
+  description?: string;
+  content?: string;
+  contentLength?: number;
+  availableSkills?: string[];
+}
+
+export interface LoadSkillToolProps {
+  input: LoadSkillInput;
+  output?: LoadSkillOutput;
+  status: "pending" | "streaming" | "running" | "completed" | "rejected" | "error";
+  className?: string;
+}
+
+export function LoadSkillTool({
+  input,
+  output,
+  status,
+  className,
+}: LoadSkillToolProps) {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const action = input?.action || "list";
+  const skillName = input?.skillName || output?.skillName;
+  const isLoading = status === "pending" || status === "streaming" || status === "running";
+  const isCompleted = status === "completed";
+  const isError = status === "error" || output?.success === false;
+
+  // Status icon and color
+  const StatusIcon = isCompleted && output?.success
+    ? CheckCircleIcon
+    : isError
+    ? XCircleIcon
+    : isLoading
+    ? ClockIcon
+    : BookOpenIcon;
+
+  const statusColor = isCompleted && output?.success
+    ? "text-green-600 dark:text-green-500"
+    : isError
+    ? "text-red-600 dark:text-red-500"
+    : isLoading
+    ? "text-muted-foreground animate-pulse"
+    : "text-muted-foreground";
+
+  const headerTitle = action === "load" 
+    ? skillName ? `Load: ${skillName}` : "Load Skill"
+    : "List Skills";
+
+  return (
+    <div className={cn("rounded-lg border overflow-hidden bg-background", className)}>
+      {/* Header */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex items-center justify-between w-full px-3 py-2.5 bg-muted/50 hover:bg-muted/70 transition-colors"
+      >
+        <div className="flex items-center gap-2 min-w-0">
+          <StatusIcon className={cn("size-4 shrink-0", statusColor)} />
+          {action === "list" ? (
+            <ListIcon className="size-3.5 text-muted-foreground" />
+          ) : (
+            <SparklesIcon className="size-3.5 text-muted-foreground" />
+          )}
+          <span className="font-medium text-sm truncate">{headerTitle}</span>
+          {isLoading && (
+            <span className="text-xs text-muted-foreground animate-pulse">loading...</span>
+          )}
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          {output?.skillCount !== undefined && (
+            <Badge variant="secondary" className="text-xs">
+              {output.skillCount} skills
+            </Badge>
+          )}
+          {output?.contentLength !== undefined && (
+            <Badge variant="secondary" className="text-xs">
+              {Math.round(output.contentLength / 1000)}k chars
+            </Badge>
+          )}
+          {isExpanded ? (
+            <ChevronDownIcon className="size-4 text-muted-foreground" />
+          ) : (
+            <ChevronRightIcon className="size-4 text-muted-foreground" />
+          )}
+        </div>
+      </button>
+
+      {/* Content */}
+      {isExpanded && (
+        <div className="border-t">
+          {/* List of skills */}
+          {output?.skills && output.skills.length > 0 && (
+            <div className="max-h-[200px] overflow-auto">
+              {output.skills.map((skill, i) => (
+                <div 
+                  key={skill.name} 
+                  className={cn(
+                    "px-3 py-2 flex items-start gap-2",
+                    i < output.skills!.length - 1 && "border-b"
+                  )}
+                >
+                  <BookOpenIcon className="size-4 mt-0.5 shrink-0 text-muted-foreground" />
+                  <div className="min-w-0">
+                    <div className="font-medium text-sm">{skill.name}</div>
+                    {skill.description && (
+                      <div className="text-xs text-muted-foreground truncate">
+                        {skill.description}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Loaded skill info */}
+          {action === "load" && output?.success && output.skillName && (
+            <div className="px-3 py-2 bg-muted/30">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <SparklesIcon className="size-4 text-green-600 dark:text-green-400" />
+                  <span className="font-medium text-sm">{output.skillName}</span>
+                </div>
+                {output.content && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-6"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      navigator.clipboard.writeText(output.content!);
+                    }}
+                  >
+                    <CopyIcon className="size-3" />
+                  </Button>
+                )}
+              </div>
+              {output.description && (
+                <p className="text-xs text-muted-foreground mt-1">{output.description}</p>
+              )}
+            </div>
+          )}
+
+          {/* Skill content preview */}
+          {output?.content && (
+            <div className="max-h-[150px] overflow-auto border-t">
+              <pre className="px-3 py-2 text-xs font-mono text-muted-foreground whitespace-pre-wrap">
+                {output.content.slice(0, 500)}
+                {output.content.length > 500 && "..."}
+              </pre>
+            </div>
+          )}
+
+          {/* Available skills hint on error */}
+          {output?.availableSkills && output.availableSkills.length > 0 && (
+            <div className="px-3 py-2 bg-muted/30 border-t">
+              <div className="text-xs text-muted-foreground">
+                Available: {output.availableSkills.join(", ")}
+              </div>
+            </div>
+          )}
+
+          {/* Empty state */}
+          {action === "list" && output?.skills?.length === 0 && (
+            <div className="px-3 py-4 text-center text-muted-foreground text-sm">
+              No skills available
+            </div>
+          )}
+
+          {/* Error message */}
+          {output?.error && (
+            <div className="px-3 py-2 border-t bg-red-500/5 text-red-600 dark:text-red-400 text-xs flex items-start gap-2">
+              <XCircleIcon className="size-3.5 mt-0.5 shrink-0" />
+              <span>{output.error}</span>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/web/.next/standalone/web/src/components/ai-elements/loader.tsx

@@ -0,0 +1,96 @@
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "react";
+
+interface LoaderIconProps {
+  size?: number;
+}
+
+const LoaderIcon = ({ size = 16 }: LoaderIconProps) => (
+  <svg
+    height={size}
+    strokeLinejoin="round"
+    style={{ color: "currentcolor" }}
+    viewBox="0 0 16 16"
+    width={size}
+  >
+    <title>Loader</title>
+    <g clipPath="url(#clip0_2393_1490)">
+      <path d="M8 0V4" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M8 16V12"
+        opacity="0.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 1.52783L5.64887 4.7639"
+        opacity="0.9"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 1.52783L10.3511 4.7639"
+        opacity="0.1"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 14.472L10.3511 11.236"
+        opacity="0.4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 14.472L5.64887 11.236"
+        opacity="0.6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 5.52783L11.8043 6.7639"
+        opacity="0.2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 10.472L4.19583 9.23598"
+        opacity="0.7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 10.4722L11.8043 9.2361"
+        opacity="0.3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 5.52783L4.19583 6.7639"
+        opacity="0.8"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2393_1490">
+        <rect fill="white" height="16" width="16" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+  size?: number;
+};
+
+export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
+  <div
+    className={cn(
+      "inline-flex animate-spin items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    <LoaderIcon size={size} />
+  </div>
+);