@goldencomm/create-baseline 0.0.1

package/templates/next/.claude/skills/ai-elements/scripts/tool.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import {
+  Confirmation,
+  ConfirmationAccepted,
+  ConfirmationAction,
+  ConfirmationActions,
+  ConfirmationRejected,
+  ConfirmationRequest,
+  ConfirmationTitle,
+} from "@/components/ai-elements/confirmation";
+import {
+  Tool,
+  ToolContent,
+  ToolHeader,
+  ToolInput,
+  ToolOutput,
+} from "@/components/ai-elements/tool";
+import type { ToolUIPart } from "ai";
+import { CheckIcon, XIcon } from "lucide-react";
+import { nanoid } from "nanoid";
+
+const handleReject = () => {
+  // In production, call addConfirmationResponse
+};
+
+const handleAccept = () => {
+  // In production, call addConfirmationResponse
+};
+
+const toolCall: ToolUIPart = {
+  errorText: undefined,
+  input: {
+    database: "analytics",
+    params: ["2024-01-01"],
+    query: "SELECT COUNT(*) FROM users WHERE created_at >= ?",
+  },
+  output: `| User ID | Name | Email | Created At |
+|---------|------|-------|------------|
+| 1 | John Doe | john@example.com | 2024-01-15 |
+| 2 | Jane Smith | jane@example.com | 2024-01-20 |
+| 3 | Bob Wilson | bob@example.com | 2024-02-01 |
+| 4 | Alice Brown | alice@example.com | 2024-02-10 |
+| 5 | Charlie Davis | charlie@example.com | 2024-02-15 |`,
+  state: "output-available" as const,
+  toolCallId: nanoid(),
+  type: "tool-database_query" as const,
+};
+
+const Example = () => (
+  <div className="space-y-4" style={{ minHeight: "1400px" }}>
+    {/* 1. input-streaming: Pending */}
+    <Tool defaultOpen>
+      <ToolHeader
+        state="input-streaming"
+        title="database_query"
+        type="tool-database_query"
+      />
+      <ToolContent>
+        <ToolInput input={{}} />
+      </ToolContent>
+    </Tool>
+
+    {/* 2. approval-requested: Awaiting Approval */}
+    <Tool>
+      <ToolHeader
+        state={"approval-requested" as ToolUIPart["state"]}
+        title="database_query"
+        type="tool-database_query"
+      />
+      <ToolContent>
+        <ToolInput input={toolCall.input} />
+        <Confirmation approval={{ id: nanoid() }} state="approval-requested">
+          <ConfirmationTitle>
+            <ConfirmationRequest>
+              This tool will execute a query on the production database.
+            </ConfirmationRequest>
+            <ConfirmationAccepted>
+              <CheckIcon className="size-4 text-green-600 dark:text-green-400" />
+              <span>Accepted</span>
+            </ConfirmationAccepted>
+            <ConfirmationRejected>
+              <XIcon className="size-4 text-destructive" />
+              <span>Rejected</span>
+            </ConfirmationRejected>
+          </ConfirmationTitle>
+          <ConfirmationActions>
+            <ConfirmationAction onClick={handleReject} variant="outline">
+              Reject
+            </ConfirmationAction>
+            <ConfirmationAction onClick={handleAccept} variant="default">
+              Accept
+            </ConfirmationAction>
+          </ConfirmationActions>
+        </Confirmation>
+      </ToolContent>
+    </Tool>
+
+    {/* 3. approval-responded: Responded */}
+    <Tool>
+      <ToolHeader
+        state={"approval-responded" as ToolUIPart["state"]}
+        title="database_query"
+        type="tool-database_query"
+      />
+      <ToolContent>
+        <ToolInput input={toolCall.input} />
+        <Confirmation
+          approval={{ approved: true, id: nanoid() }}
+          state="approval-responded"
+        >
+          <ConfirmationTitle>
+            <ConfirmationRequest>
+              This tool will execute a query on the production database.
+            </ConfirmationRequest>
+            <ConfirmationAccepted>
+              <CheckIcon className="size-4 text-green-600 dark:text-green-400" />
+              <span>Accepted</span>
+            </ConfirmationAccepted>
+            <ConfirmationRejected>
+              <XIcon className="size-4 text-destructive" />
+              <span>Rejected</span>
+            </ConfirmationRejected>
+          </ConfirmationTitle>
+        </Confirmation>
+      </ToolContent>
+    </Tool>
+
+    {/* 4. input-available: Running */}
+    <Tool>
+      <ToolHeader
+        state="input-available"
+        title="database_query"
+        type="tool-database_query"
+      />
+      <ToolContent>
+        <ToolInput input={toolCall.input} />
+      </ToolContent>
+    </Tool>
+
+    {/* 5. output-available: Completed */}
+    <Tool>
+      <ToolHeader state={toolCall.state} type={toolCall.type} />
+      <ToolContent>
+        <ToolInput input={toolCall.input} />
+        <Confirmation
+          approval={{ approved: true, id: nanoid() }}
+          state="output-available"
+        >
+          <ConfirmationTitle>
+            <ConfirmationRequest>
+              This tool will execute a query on the production database.
+            </ConfirmationRequest>
+            <ConfirmationAccepted>
+              <CheckIcon className="size-4 text-green-600 dark:text-green-400" />
+              <span>Accepted</span>
+            </ConfirmationAccepted>
+            <ConfirmationRejected>
+              <XIcon className="size-4 text-destructive" />
+              <span>Rejected</span>
+            </ConfirmationRejected>
+          </ConfirmationTitle>
+        </Confirmation>
+        {toolCall.state === "output-available" && (
+          <ToolOutput errorText={toolCall.errorText} output={toolCall.output} />
+        )}
+      </ToolContent>
+    </Tool>
+
+    {/* 6. output-error: Error */}
+    <Tool>
+      <ToolHeader
+        state="output-error"
+        title="database_query"
+        type="tool-database_query"
+      />
+      <ToolContent>
+        <ToolInput input={toolCall.input} />
+        <ToolOutput
+          errorText="Connection timeout: Unable to reach database server"
+          output={undefined}
+        />
+      </ToolContent>
+    </Tool>
+
+    {/* 7. output-denied: Denied */}
+    <Tool>
+      <ToolHeader
+        state={"output-denied" as ToolUIPart["state"]}
+        title="database_query"
+        type="tool-database_query"
+      />
+      <ToolContent>
+        <ToolInput input={toolCall.input} />
+        <Confirmation
+          approval={{
+            approved: false,
+            id: nanoid(),
+            reason: "Query could impact production performance",
+          }}
+          state="output-denied"
+        >
+          <ConfirmationTitle>
+            <ConfirmationRequest>
+              This tool will execute a query on the production database.
+            </ConfirmationRequest>
+            <ConfirmationAccepted>
+              <CheckIcon className="size-4 text-green-600 dark:text-green-400" />
+              <span>Accepted</span>
+            </ConfirmationAccepted>
+            <ConfirmationRejected>
+              <XIcon className="size-4 text-destructive" />
+              <span>Rejected: Query could impact production performance</span>
+            </ConfirmationRejected>
+          </ConfirmationTitle>
+        </Confirmation>
+      </ToolContent>
+    </Tool>
+  </div>
+);
+
+export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/transcription.tsx

@@ -0,0 +1,290 @@
+"use client";
+
+import {
+  Transcription,
+  TranscriptionSegment,
+} from "@/components/ai-elements/transcription";
+import type { Experimental_TranscriptionResult as TranscriptionResult } from "ai";
+import { useCallback, useRef, useState } from "react";
+
+const segments: TranscriptionResult["segments"] = [
+  {
+    endSecond: 0.219,
+    startSecond: 0.119,
+    text: "You",
+  },
+  {
+    endSecond: 0.259,
+    startSecond: 0.219,
+    text: " ",
+  },
+  {
+    endSecond: 0.439,
+    startSecond: 0.259,
+    text: "can",
+  },
+  {
+    endSecond: 0.459,
+    startSecond: 0.439,
+    text: " ",
+  },
+  {
+    endSecond: 0.699,
+    startSecond: 0.459,
+    text: "build",
+  },
+  {
+    endSecond: 0.72,
+    startSecond: 0.699,
+    text: " ",
+  },
+  {
+    endSecond: 0.799,
+    startSecond: 0.72,
+    text: "and",
+  },
+  {
+    endSecond: 0.879,
+    startSecond: 0.799,
+    text: " ",
+  },
+  {
+    endSecond: 1.339,
+    startSecond: 0.879,
+    text: "host",
+  },
+  {
+    endSecond: 1.359,
+    startSecond: 1.339,
+    text: " ",
+  },
+  {
+    endSecond: 1.539,
+    startSecond: 1.36,
+    text: "many",
+  },
+  {
+    endSecond: 1.6,
+    startSecond: 1.539,
+    text: " ",
+  },
+  {
+    endSecond: 1.86,
+    startSecond: 1.6,
+    text: "different",
+  },
+  {
+    endSecond: 1.899,
+    startSecond: 1.86,
+    text: " ",
+  },
+  {
+    endSecond: 2.099,
+    startSecond: 1.899,
+    text: "types",
+  },
+  {
+    endSecond: 2.119,
+    startSecond: 2.099,
+    text: " ",
+  },
+  {
+    endSecond: 2.2,
+    startSecond: 2.119,
+    text: "of",
+  },
+  {
+    endSecond: 2.259,
+    startSecond: 2.2,
+    text: " ",
+  },
+  {
+    endSecond: 2.96,
+    startSecond: 2.259,
+    text: "applications",
+  },
+  {
+    endSecond: 3.479,
+    startSecond: 2.96,
+    text: " ",
+  },
+  {
+    endSecond: 3.699,
+    startSecond: 3.48,
+    text: "from",
+  },
+  {
+    endSecond: 3.779,
+    startSecond: 3.699,
+    text: " ",
+  },
+  {
+    endSecond: 4.099,
+    startSecond: 3.779,
+    text: "static",
+  },
+  {
+    endSecond: 4.179,
+    startSecond: 4.099,
+    text: " ",
+  },
+  {
+    endSecond: 4.519,
+    startSecond: 4.179,
+    text: "sites",
+  },
+  {
+    endSecond: 4.539,
+    startSecond: 4.519,
+    text: " ",
+  },
+  {
+    endSecond: 4.759,
+    startSecond: 4.539,
+    text: "with",
+  },
+  {
+    endSecond: 4.799,
+    startSecond: 4.759,
+    text: " ",
+  },
+  {
+    endSecond: 4.939,
+    startSecond: 4.799,
+    text: "your",
+  },
+  {
+    endSecond: 4.96,
+    startSecond: 4.939,
+    text: " ",
+  },
+  {
+    endSecond: 5.219,
+    startSecond: 4.96,
+    text: "favorite",
+  },
+  {
+    endSecond: 5.319,
+    startSecond: 5.219,
+    text: " ",
+  },
+  {
+    endSecond: 5.939,
+    startSecond: 5.319,
+    text: "framework,",
+  },
+  {
+    endSecond: 5.96,
+    startSecond: 5.939,
+    text: " ",
+  },
+  {
+    endSecond: 6.519,
+    startSecond: 5.96,
+    text: "multi-tenant",
+  },
+  {
+    endSecond: 6.559,
+    startSecond: 6.519,
+    text: " ",
+  },
+  {
+    endSecond: 7.259,
+    startSecond: 6.559,
+    text: "applications",
+  },
+  {
+    endSecond: 7.699,
+    startSecond: 7.259,
+    text: " ",
+  },
+  {
+    endSecond: 7.759,
+    startSecond: 7.699,
+    text: "or",
+  },
+  {
+    endSecond: 7.859,
+    startSecond: 7.759,
+    text: " ",
+  },
+  {
+    endSecond: 8.739,
+    startSecond: 7.859,
+    text: "micro-frontends",
+  },
+  {
+    endSecond: 8.78,
+    startSecond: 8.739,
+    text: " ",
+  },
+  {
+    endSecond: 8.96,
+    startSecond: 8.78,
+    text: "to",
+  },
+  {
+    endSecond: 9.099,
+    startSecond: 8.96,
+    text: " ",
+  },
+  {
+    endSecond: 9.779,
+    startSecond: 9.099,
+    text: "AI-powered",
+  },
+  {
+    endSecond: 9.82,
+    startSecond: 9.779,
+    text: " ",
+  },
+  {
+    endSecond: 10.439,
+    startSecond: 9.82,
+    text: "agents.",
+  },
+];
+
+const Example = () => {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [currentTime, setCurrentTime] = useState(0);
+
+  const handleSeek = useCallback((time: number) => {
+    if (audioRef.current) {
+      audioRef.current.currentTime = time;
+    }
+  }, []);
+
+  const handleTimeUpdate = useCallback(() => {
+    if (audioRef.current) {
+      setCurrentTime(audioRef.current.currentTime);
+    }
+  }, []);
+
+  return (
+    <div className="space-y-6 p-6">
+      {/* biome-ignore lint/a11y/useMediaCaption: "No caption needed" */}
+      {/* oxlint-disable-next-line eslint-plugin-jsx-a11y(media-has-caption) */}
+      <audio controls onTimeUpdate={handleTimeUpdate} ref={audioRef}>
+        <source src="https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2025-11-10T22_10_24_Hayden_pvc_sp110_s50_sb75_se0_b_m2.mp3" />
+      </audio>
+
+      <Transcription
+        currentTime={currentTime}
+        onSeek={handleSeek}
+        segments={segments}
+      >
+        {(segment, index) => (
+          <TranscriptionSegment
+            className="text-lg"
+            index={index}
+            key={`${segment.startSecond}-${segment.endSecond}`}
+            segment={segment}
+          />
+        )}
+      </Transcription>
+    </div>
+  );
+};
+
+export default Example;