create-inox-app 0.1.0

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

@@ -0,0 +1,99 @@
+"use client";
+
+import {
+  JSXPreview,
+  JSXPreviewContent,
+  JSXPreviewError,
+} from "@/components/ai-elements/jsx-preview";
+import { Button } from "@/components/ui/button";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const handleError = (error: Error) => {
+  console.log("JSX Parse Error:", error);
+};
+
+const fullJsx = `<div className="rounded-lg border bg-card p-6 shadow-sm">
+  <div className="flex items-center gap-4 mb-4">
+    <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
+      <span className="text-primary text-xl font-bold">AI</span>
+    </div>
+    <div>
+      <h2 className="text-lg font-semibold">AI-Generated Component</h2>
+      <p className="text-sm text-muted-foreground">Rendered from JSX string</p>
+    </div>
+  </div>
+  <div className="space-y-3">
+    <p className="text-sm">This component was dynamically rendered from a JSX string. The JSXPreview component supports streaming mode, automatically closing unclosed tags as content arrives.</p>
+    <div className="flex gap-2">
+      <span className="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">React</span>
+      <span className="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">Streaming</span>
+      <span className="inline-flex items-center rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-medium text-purple-800">Dynamic</span>
+    </div>
+  </div>
+  <div className="mt-4 pt-4 border-t">
+    <div className="flex justify-between items-center">
+      <span className="text-xs text-muted-foreground">Generated just now</span>
+      <button className="px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors">
+        Learn more
+      </button>
+    </div>
+  </div>
+</div>`;
+
+const Example = () => {
+  const [streamedJsx, setStreamedJsx] = useState(fullJsx);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const simulateStreaming = useCallback(() => {
+    setIsStreaming(true);
+    setStreamedJsx("");
+    let index = 0;
+
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+
+    intervalRef.current = setInterval(() => {
+      if (index < fullJsx.length) {
+        setStreamedJsx(fullJsx.slice(0, index + 15));
+        index += 15;
+      } else {
+        setIsStreaming(false);
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current);
+          intervalRef.current = null;
+        }
+      }
+    }, 30);
+  }, []);
+
+  useEffect(
+    () => () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    },
+    [],
+  );
+
+  return (
+    <div className="space-y-4">
+      <Button disabled={isStreaming} onClick={simulateStreaming} size="sm" variant="outline">
+        {isStreaming ? "Streaming..." : "Simulate Streaming"}
+      </Button>
+
+      <JSXPreview
+        className="min-h-[200px]"
+        isStreaming={isStreaming}
+        jsx={streamedJsx}
+        onError={handleError}
+      >
+        <JSXPreviewContent />
+        <JSXPreviewError className="mt-2" />
+      </JSXPreview>
+    </div>
+  );
+};
+
+export default Example;

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

@@ -0,0 +1,324 @@
+"use client";
+
+import {
+  Attachment,
+  AttachmentPreview,
+  AttachmentRemove,
+  Attachments,
+} from "@/components/ai-elements/attachments";
+import {
+  Message,
+  MessageAction,
+  MessageActions,
+  MessageBranch,
+  MessageBranchContent,
+  MessageBranchNext,
+  MessageBranchPage,
+  MessageBranchPrevious,
+  MessageBranchSelector,
+  MessageContent,
+  MessageResponse,
+  MessageToolbar,
+} from "@/components/ai-elements/message";
+import { CopyIcon, RefreshCcwIcon, ThumbsDownIcon, ThumbsUpIcon } from "lucide-react";
+import { nanoid } from "nanoid";
+import { memo, useCallback, useState } from "react";
+
+const messages: {
+  key: string;
+  from: "user" | "assistant";
+  versions?: { id: string; content: string }[];
+  content?: string;
+  attachments?: {
+    id: string;
+    type: "file";
+    url: string;
+    mediaType?: string;
+    filename?: string;
+  }[];
+}[] = [
+  {
+    attachments: [
+      {
+        filename: "palace-of-fine-arts.jpg",
+        id: nanoid(),
+        mediaType: "image/jpeg",
+        type: "file",
+        url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop",
+      },
+      {
+        filename: "react-hooks-guide.pdf",
+        id: nanoid(),
+        mediaType: "application/pdf",
+        type: "file",
+        url: "",
+      },
+    ],
+    content: "How do React hooks work and when should I use them?",
+    from: "user",
+    key: nanoid(),
+  },
+  {
+    from: "assistant",
+    key: nanoid(),
+    versions: [
+      {
+        content: `# React Hooks Guide
+
+React hooks are functions that let you "hook into" React state and lifecycle features from function components. Here's what you need to know:
+
+## Core Hooks
+
+### useState
+Adds state to functional components:
+
+\`\`\`jsx
+const [count, setCount] = useState(0);
+
+return (
+  <button onClick={() => setCount(count + 1)}>
+    Count: {count}
+  </button>
+);
+\`\`\`
+
+### useEffect
+Handles side effects (data fetching, subscriptions, DOM updates):
+
+\`\`\`jsx
+useEffect(() => {
+  document.title = \`You clicked \${count} times\`;
+
+  // Cleanup function (optional)
+  return () => {
+    document.title = 'React App';
+  };
+}, [count]); // Dependency array
+\`\`\`
+
+## When to Use Hooks
+
+- ✅ **Function components** - Hooks only work in function components
+- ✅ **Replacing class components** - Modern React favors hooks over classes
+- ✅ **Sharing stateful logic** - Create custom hooks to reuse logic
+- ❌ **Class components** - Use lifecycle methods instead
+
+## Rules of Hooks
+
+1. Only call hooks at the **top level** (not inside loops, conditions, or nested functions)
+2. Only call hooks from **React functions** (components or custom hooks)
+
+Would you like to explore more advanced hooks like \`useCallback\` or \`useMemo\`?`,
+        id: nanoid(),
+      },
+      {
+        content: `React hooks are special functions that let you use React features in function components. The most common ones are:
+
+- **useState** - for managing component state
+- **useEffect** - for side effects like data fetching
+- **useContext** - for consuming context values
+- **useRef** - for accessing DOM elements
+
+Here's a simple example:
+
+\`\`\`jsx
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <button onClick={() => setCount(count + 1)}>
+      Clicked {count} times
+    </button>
+  );
+}
+\`\`\`
+
+Which specific hook would you like to learn more about?`,
+        id: nanoid(),
+      },
+      {
+        content: `Absolutely! React hooks are a powerful feature introduced in React 16.8. They solve several problems:
+
+## Key Benefits
+
+1. **Simpler code** - No need for class components
+2. **Reusable logic** - Extract stateful logic into custom hooks
+3. **Better organization** - Group related code together
+
+## Most Popular Hooks
+
+| Hook | Purpose |
+|------|---------|
+| useState | Add state to components |
+| useEffect | Handle side effects |
+| useContext | Access context values |
+| useReducer | Complex state logic |
+| useCallback | Memoize functions |
+| useMemo | Memoize values |
+
+The beauty of hooks is that they let you reuse stateful logic without changing your component hierarchy. Want to dive into a specific hook?`,
+        id: nanoid(),
+      },
+    ],
+  },
+];
+
+const handleCopy = (content: string) => {
+  navigator.clipboard.writeText(content);
+};
+
+const handleRetry = () => {
+  console.log("Retrying...");
+};
+
+interface LikeActionProps {
+  messageKey: string;
+  isLiked: boolean;
+  onToggle: (key: string) => void;
+}
+
+const LikeAction = memo(({ messageKey, isLiked, onToggle }: LikeActionProps) => {
+  const handleClick = useCallback(() => onToggle(messageKey), [messageKey, onToggle]);
+  return (
+    <MessageAction label="Like" onClick={handleClick} tooltip="Like this response">
+      <ThumbsUpIcon className="size-4" fill={isLiked ? "currentColor" : "none"} />
+    </MessageAction>
+  );
+});
+
+LikeAction.displayName = "LikeAction";
+
+interface DislikeActionProps {
+  messageKey: string;
+  isDisliked: boolean;
+  onToggle: (key: string) => void;
+}
+
+const DislikeAction = memo(({ messageKey, isDisliked, onToggle }: DislikeActionProps) => {
+  const handleClick = useCallback(() => onToggle(messageKey), [messageKey, onToggle]);
+  return (
+    <MessageAction label="Dislike" onClick={handleClick} tooltip="Dislike this response">
+      <ThumbsDownIcon className="size-4" fill={isDisliked ? "currentColor" : "none"} />
+    </MessageAction>
+  );
+});
+
+DislikeAction.displayName = "DislikeAction";
+
+interface CopyActionProps {
+  content: string;
+}
+
+const CopyAction = memo(({ content }: CopyActionProps) => {
+  const handleClick = useCallback(() => handleCopy(content), [content]);
+  return (
+    <MessageAction label="Copy" onClick={handleClick} tooltip="Copy to clipboard">
+      <CopyIcon className="size-4" />
+    </MessageAction>
+  );
+});
+
+CopyAction.displayName = "CopyAction";
+
+const Example = () => {
+  const [liked, setLiked] = useState<Record<string, boolean>>({});
+  const [disliked, setDisliked] = useState<Record<string, boolean>>({});
+
+  const handleToggleLike = useCallback((key: string) => {
+    setLiked((prev) => ({ ...prev, [key]: !prev[key] }));
+  }, []);
+
+  const handleToggleDislike = useCallback((key: string) => {
+    setDisliked((prev) => ({ ...prev, [key]: !prev[key] }));
+  }, []);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Demo component with complex rendering logic */}
+      {messages.map((message) => (
+        <Message from={message.from} key={message.key}>
+          {message.versions?.length && message.versions.length > 1 ? (
+            <MessageBranch defaultBranch={0} key={message.key}>
+              <MessageBranchContent>
+                {message.versions?.map((version) => (
+                  <MessageContent key={version.id}>
+                    <MessageResponse>{version.content}</MessageResponse>
+                  </MessageContent>
+                ))}
+              </MessageBranchContent>
+              {message.from === "assistant" && (
+                <MessageToolbar>
+                  <MessageBranchSelector>
+                    <MessageBranchPrevious />
+                    <MessageBranchPage />
+                    <MessageBranchNext />
+                  </MessageBranchSelector>
+                  <MessageActions>
+                    <MessageAction
+                      label="Retry"
+                      onClick={handleRetry}
+                      tooltip="Regenerate response"
+                    >
+                      <RefreshCcwIcon className="size-4" />
+                    </MessageAction>
+                    <LikeAction
+                      isLiked={liked[message.key] ?? false}
+                      messageKey={message.key}
+                      onToggle={handleToggleLike}
+                    />
+                    <DislikeAction
+                      isDisliked={disliked[message.key] ?? false}
+                      messageKey={message.key}
+                      onToggle={handleToggleDislike}
+                    />
+                    <CopyAction content={message.versions?.find((v) => v.id)?.content || ""} />
+                  </MessageActions>
+                </MessageToolbar>
+              )}
+            </MessageBranch>
+          ) : (
+            <div key={message.key}>
+              {message.attachments && message.attachments.length > 0 && (
+                <Attachments className="mb-2" variant="grid">
+                  {message.attachments.map((attachment) => (
+                    <Attachment data={attachment} key={attachment.id}>
+                      <AttachmentPreview />
+                      <AttachmentRemove />
+                    </Attachment>
+                  ))}
+                </Attachments>
+              )}
+              <MessageContent>
+                {message.from === "assistant" ? (
+                  <MessageResponse>{message.content}</MessageResponse>
+                ) : (
+                  message.content
+                )}
+              </MessageContent>
+              {message.from === "assistant" && message.versions && (
+                <MessageActions>
+                  <MessageAction label="Retry" onClick={handleRetry} tooltip="Regenerate response">
+                    <RefreshCcwIcon className="size-4" />
+                  </MessageAction>
+                  <LikeAction
+                    isLiked={liked[message.key] ?? false}
+                    messageKey={message.key}
+                    onToggle={handleToggleLike}
+                  />
+                  <DislikeAction
+                    isDisliked={disliked[message.key] ?? false}
+                    messageKey={message.key}
+                    onToggle={handleToggleDislike}
+                  />
+                  <CopyAction content={message.content || ""} />
+                </MessageActions>
+              )}
+            </div>
+          )}
+        </Message>
+      ))}
+    </div>
+  );
+};
+
+export default Example;

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

@@ -0,0 +1,46 @@
+"use client";
+
+import {
+  MicSelector,
+  MicSelectorContent,
+  MicSelectorEmpty,
+  MicSelectorInput,
+  MicSelectorItem,
+  MicSelectorLabel,
+  MicSelectorList,
+  MicSelectorTrigger,
+  MicSelectorValue,
+} from "@/components/ai-elements/mic-selector";
+
+const handleOpenChange = (open: boolean) => {
+  console.log("MicSelector is open?", open);
+};
+
+const handleValueChange = (newValue: string) => {
+  console.log("MicSelector value:", newValue);
+};
+
+const Example = () => (
+  <div className="flex size-full flex-col items-center justify-center gap-4">
+    <MicSelector onOpenChange={handleOpenChange} onValueChange={handleValueChange}>
+      <MicSelectorTrigger className="w-full max-w-sm">
+        <MicSelectorValue />
+      </MicSelectorTrigger>
+      <MicSelectorContent>
+        <MicSelectorInput />
+        <MicSelectorEmpty />
+        <MicSelectorList>
+          {(devices) =>
+            devices.map((device) => (
+              <MicSelectorItem key={device.deviceId} value={device.deviceId}>
+                <MicSelectorLabel device={device} />
+              </MicSelectorItem>
+            ))
+          }
+        </MicSelectorList>
+      </MicSelectorContent>
+    </MicSelector>
+  </div>
+);
+
+export default Example;