create-inox-app 0.1.0

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/tool.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import type { ToolUIPart } from "ai";
+
+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 { 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/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/transcription.tsx

@@ -0,0 +1,284 @@
+"use client";
+
+import type { Experimental_TranscriptionResult as TranscriptionResult } from "ai";
+
+import { Transcription, TranscriptionSegment } from "@/components/ai-elements/transcription";
+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;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/voice-selector.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import type { ComponentProps } from "react";
+
+import {
+  VoiceSelector,
+  VoiceSelectorAccent,
+  VoiceSelectorAge,
+  VoiceSelectorBullet,
+  VoiceSelectorContent,
+  VoiceSelectorDescription,
+  VoiceSelectorEmpty,
+  VoiceSelectorGender,
+  VoiceSelectorInput,
+  VoiceSelectorItem,
+  VoiceSelectorList,
+  VoiceSelectorName,
+  VoiceSelectorPreview,
+  VoiceSelectorTrigger,
+} from "@/components/ai-elements/voice-selector";
+import { Button } from "@/components/ui/button";
+import { memo, useCallback, useRef, useState } from "react";
+
+const voices: {
+  id: string;
+  name: string;
+  description: string;
+  gender: ComponentProps<typeof VoiceSelectorGender>["value"];
+  accent: ComponentProps<typeof VoiceSelectorAccent>["value"];
+  age: string;
+  previewUrl: string;
+}[] = [
+  {
+    accent: "american",
+    age: "20-30",
+    description: "Energetic, Social Media Creator",
+    gender: "male",
+    id: "liam",
+    name: "Liam",
+    previewUrl:
+      "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_16_50_Liam%20-%20Energetic%2C%20Social%20Media%20Creator_pre_sp100_s50_sb75_se0_b_m2.mp3",
+  },
+  {
+    accent: "american",
+    age: "30-40",
+    description: "Dominant, Firm",
+    gender: "male",
+    id: "adam",
+    name: "Adam",
+    previewUrl:
+      "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_17_00_Adam%20-%20Dominant%2C%20Firm_pre_sp100_s50_sb75_se0_b_m2.mp3",
+  },
+  {
+    accent: "british",
+    age: "30-40",
+    description: "Clear, Engaging Educator",
+    gender: "female",
+    id: "alice",
+    name: "Alice",
+    previewUrl:
+      "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_17_09_Alice%20-%20Clear%2C%20Engaging%20Educator_pre_sp100_s50_sb75_se0_b_m2.mp3",
+  },
+  {
+    accent: "american",
+    age: "50-60",
+    description: "Wise, Mature, Balanced",
+    gender: "male",
+    id: "bill",
+    name: "Bill",
+    previewUrl:
+      "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_17_25_Bill%20-%20Wise%2C%20Mature%2C%20Balanced_pre_sp100_s50_sb75_se0_b_m2.mp3",
+  },
+  {
+    accent: "american",
+    age: "20-30",
+    description: "Playful, Bright, Warm",
+    gender: "female",
+    id: "jessica",
+    name: "Jessica",
+    previewUrl:
+      "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_17_50_Jessica%20-%20Playful%2C%20Bright%2C%20Warm_pre_sp100_s50_sb75_se0_b_m2.mp3",
+  },
+  {
+    accent: "british",
+    age: "30-40",
+    description: "Velvety Actress",
+    gender: "female",
+    id: "lily",
+    name: "Lily",
+    previewUrl:
+      "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_18_03_Lily%20-%20Velvety%20Actress_pre_sp100_s50_sb75_se0_b_m2.mp3",
+  },
+];
+
+interface VoiceItemProps {
+  voice: (typeof voices)[0];
+  playingVoice: string | null;
+  loadingVoice: string | null;
+  onSelect: (id: string) => void;
+  onPreview: (id: string) => void;
+}
+
+const VoiceItem = memo(
+  ({ voice, playingVoice, loadingVoice, onSelect, onPreview }: VoiceItemProps) => {
+    const handleSelect = useCallback(() => onSelect(voice.id), [onSelect, voice.id]);
+    const handlePreview = useCallback(() => onPreview(voice.id), [onPreview, voice.id]);
+    return (
+      <VoiceSelectorItem key={voice.id} onSelect={handleSelect} value={voice.id}>
+        <VoiceSelectorPreview
+          loading={loadingVoice === voice.id}
+          onPlay={handlePreview}
+          playing={playingVoice === voice.id}
+        />
+        <VoiceSelectorName>{voice.name}</VoiceSelectorName>
+        <VoiceSelectorDescription>{voice.description}</VoiceSelectorDescription>
+        <VoiceSelectorBullet />
+        <VoiceSelectorAccent value={voice.accent} />
+        <VoiceSelectorBullet />
+        <VoiceSelectorAge>{voice.age}</VoiceSelectorAge>
+        <VoiceSelectorBullet />
+        <VoiceSelectorGender value={voice.gender} />
+      </VoiceSelectorItem>
+    );
+  },
+);
+
+VoiceItem.displayName = "VoiceItem";
+
+const Example = () => {
+  const [open, setOpen] = useState(false);
+  const [selectedVoice, setSelectedVoice] = useState<string | null>(null);
+  const [playingVoice, setPlayingVoice] = useState<string | null>(null);
+  const [loadingVoice, setLoadingVoice] = useState<string | null>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  const handleSelect = useCallback((voiceId: string) => {
+    setSelectedVoice(voiceId);
+    setOpen(false);
+  }, []);
+
+  const handlePreview = useCallback(
+    (voiceId: string) => {
+      const voice = voices.find((v) => v.id === voiceId);
+      if (!voice) {
+        return;
+      }
+
+      // If clicking the same voice that's playing, pause it
+      if (playingVoice === voiceId) {
+        audioRef.current?.pause();
+        setPlayingVoice(null);
+        return;
+      }
+
+      // Stop any currently playing audio
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current = null;
+      }
+
+      setLoadingVoice(voiceId);
+
+      const audio = new Audio(voice.previewUrl);
+      audioRef.current = audio;
+
+      audio.addEventListener("canplaythrough", () => {
+        setLoadingVoice(null);
+        setPlayingVoice(voiceId);
+        audio.play();
+      });
+
+      audio.addEventListener("ended", () => {
+        setPlayingVoice(null);
+      });
+
+      audio.addEventListener("error", () => {
+        setLoadingVoice(null);
+        setPlayingVoice(null);
+      });
+
+      audio.load();
+    },
+    [playingVoice],
+  );
+
+  const selectedVoiceData = voices.find((voice) => voice.id === selectedVoice);
+
+  return (
+    <div className="flex size-full flex-col items-center justify-center">
+      <VoiceSelector onOpenChange={setOpen} open={open}>
+        <VoiceSelectorTrigger asChild>
+          <Button className="w-full max-w-xs" variant="outline">
+            {selectedVoiceData ? (
+              <>
+                <VoiceSelectorName>{selectedVoiceData.name}</VoiceSelectorName>
+                <VoiceSelectorAccent value={selectedVoiceData.accent} />
+                <VoiceSelectorBullet />
+                <VoiceSelectorAge>{selectedVoiceData.age}</VoiceSelectorAge>
+                <VoiceSelectorBullet />
+                <VoiceSelectorGender value={selectedVoiceData.gender} />
+              </>
+            ) : (
+              <span className="flex-1 text-left text-sm">Select a voice...</span>
+            )}
+          </Button>
+        </VoiceSelectorTrigger>
+        <VoiceSelectorContent className="max-w-md">
+          <VoiceSelectorInput placeholder="Search voices..." />
+          <VoiceSelectorList>
+            <VoiceSelectorEmpty>No voices found.</VoiceSelectorEmpty>
+            {voices.map((voice) => (
+              <VoiceItem
+                key={voice.id}
+                loadingVoice={loadingVoice}
+                onPreview={handlePreview}
+                onSelect={handleSelect}
+                playingVoice={playingVoice}
+                voice={voice}
+              />
+            ))}
+          </VoiceSelectorList>
+        </VoiceSelectorContent>
+      </VoiceSelector>
+    </div>
+  );
+};
+
+export default Example;