ui-lab-registry 0.3.44 → 0.3.46

package/src/elements/AI/AIChatInput/variations/01-basic/index.tsx

@@ -1,39 +0,0 @@
-"use client"
-import React, { useState } from 'react';
-import { PromptInput } from './layout/PromptInput.js';
-
-export function BasicAIChatInput() {
-  const [prompt, setPrompt] = useState('');
-
-  const handleSubmit = (value: string) => {
-    console.log('Prompt submitted:', value);
-    setPrompt('');
-  };
-
-  return (
-    <div className="min-h-screen bg-background-950 p-8">
-      <div className="max-w-2xl mx-auto">
-        <h1 className="text-3xl font-bold text-foreground-50 mb-8">AI Chat Input</h1>
-
-        <div className="space-y-8">
-          <div>
-            <p className="text-foreground-400 mb-4">Ask the AI anything:</p>
-            <PromptInput
-              value={prompt}
-              onChange={setPrompt}
-              onSubmit={handleSubmit}
-              placeholder="Enter your prompt..."
-            />
-          </div>
-
-          {prompt && (
-            <div className="bg-background-800 rounded-md border border-background-700 p-6">
-              <p className="text-sm text-foreground-400 mb-2">Current prompt:</p>
-              <p className="text-foreground-50">{prompt}</p>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/elements/AI/AIChatInput/variations/01-basic/layout/PromptInput.tsx

@@ -1,58 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-
-interface PromptInputProps {
-  value: string;
-  onChange: (value: string) => void;
-  onSubmit: (value: string) => void;
-  placeholder?: string;
-}
-
-export function PromptInput({
-  value,
-  onChange,
-  onSubmit,
-  placeholder = 'Ask AI...',
-}: PromptInputProps) {
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
-      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 150)}px`;
-    }
-  }, [value]);
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      if (value.trim()) {
-        onSubmit(value);
-      }
-    }
-  };
-
-  return (
-    <div className="flex gap-3 p-4 bg-background-800 border border-background-700 rounded-md">
-      <textarea
-        ref={textareaRef}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholder}
-        className="flex-1 bg-transparent border-0 text-foreground-50 placeholder-foreground-400 focus:outline-none resize-none"
-        rows={1}
-      />
-      <button
-        onClick={() => {
-          if (value.trim()) {
-            onSubmit(value);
-          }
-        }}
-        disabled={!value.trim()}
-        className="px-4 py-2 bg-accent-500 text-foreground-50 rounded font-medium hover:bg-accent-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0"
-      >
-        Send
-      </button>
-    </div>
-  );
-}

package/src/elements/AI/AIChatInput/variations/02-with-suggestions/index.tsx

@@ -1,67 +0,0 @@
-"use client"
-import React, { useState } from 'react';
-import { PromptInputWithSuggestions } from './layout/PromptInputWithSuggestions.js';
-
-export function AIChatInputWithSuggestions() {
-  const [prompt, setPrompt] = useState('');
-  const [selectedSuggestion, setSelectedSuggestion] = useState<string | null>(null);
-
-  const suggestions = [
-    'Explain this concept in simple terms',
-    'Write a code example',
-    'What are the best practices?',
-    'How do I debug this?',
-  ];
-
-  const handleSubmit = (value: string) => {
-    console.log('Prompt submitted:', value);
-    setPrompt('');
-    setSelectedSuggestion(null);
-  };
-
-  const handleSuggestionClick = (suggestion: string) => {
-    setSelectedSuggestion(suggestion);
-    setPrompt(suggestion);
-  };
-
-  return (
-    <div className="min-h-screen bg-background-950 p-8">
-      <div className="max-w-2xl mx-auto">
-        <h1 className="text-3xl font-bold text-foreground-50 mb-8">Chat with AI</h1>
-
-        <div className="space-y-6">
-          {prompt.length === 0 && (
-            <div>
-              <p className="text-sm text-foreground-400 mb-3">Quick suggestions:</p>
-              <div className="grid grid-cols-2 gap-2">
-                {suggestions.map((suggestion) => (
-                  <button
-                    key={suggestion}
-                    onClick={() => handleSuggestionClick(suggestion)}
-                    className="text-left px-3 py-2 bg-background-800 border border-background-700 rounded hover:border-accent-500 hover:bg-background-700/80 transition-colors text-sm text-foreground-300 hover:text-foreground-200"
-                  >
-                    {suggestion}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-
-          <PromptInputWithSuggestions
-            value={prompt}
-            onChange={setPrompt}
-            onSubmit={handleSubmit}
-            placeholder="Enter your prompt or use a suggestion..."
-          />
-
-          {selectedSuggestion && (
-            <div className="p-4 bg-background-800 border border-accent-500/30 rounded-md">
-              <p className="text-sm text-foreground-400 mb-1">Using suggestion:</p>
-              <p className="text-foreground-50">{selectedSuggestion}</p>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/elements/AI/AIChatInput/variations/02-with-suggestions/layout/PromptInputWithSuggestions.tsx

@@ -1,63 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-
-interface PromptInputWithSuggestionsProps {
-  value: string;
-  onChange: (value: string) => void;
-  onSubmit: (value: string) => void;
-  placeholder?: string;
-}
-
-export function PromptInputWithSuggestions({
-  value,
-  onChange,
-  onSubmit,
-  placeholder = 'Ask AI...',
-}: PromptInputWithSuggestionsProps) {
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
-      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 150)}px`;
-    }
-  }, [value]);
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      if (value.trim()) {
-        onSubmit(value);
-      }
-    }
-  };
-
-  return (
-    <div className="flex gap-3 p-4 bg-background-800 border border-background-700 rounded-md">
-      <textarea
-        ref={textareaRef}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholder}
-        className="flex-1 bg-transparent border-0 text-foreground-50 placeholder-foreground-400 focus:outline-none resize-none"
-        rows={1}
-      />
-      <div className="flex flex-col gap-2">
-        <button
-          onClick={() => {
-            if (value.trim()) {
-              onSubmit(value);
-            }
-          }}
-          disabled={!value.trim()}
-          className="px-4 py-2 bg-accent-500 text-foreground-50 rounded font-medium hover:bg-accent-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0 text-sm"
-        >
-          Send
-        </button>
-        <button className="px-2 py-1 text-foreground-400 hover:text-foreground-200 text-sm rounded border border-background-700 hover:border-background-600 transition-colors">
-          ⌘K
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/elements/AI/AIChatInput/variations/index.ts

@@ -1,18 +0,0 @@
-// Export all variation components
-export { BasicAIChatInput } from './01-basic/index.js';
-export { AIChatInputWithSuggestions } from './02-with-suggestions/index.js';
-
-// Type for all variations
-export type AIChatInputVariations = 'BasicAIChatInput' | 'AIChatInputWithSuggestions';
-
-// Demo path mapping for dynamic imports and routing
-export const DEMO_MAP = {
-  'ai-chat-input-basic': { key: '01-basic', export: 'BasicAIChatInput' },
-  'ai-chat-input-suggestions': { key: '02-with-suggestions', export: 'AIChatInputWithSuggestions' },
-} as const;
-
-// Component map for internal use
-export const variationComponentMap = {
-  '01-basic': async () => (await import('./01-basic')).BasicAIChatInput,
-  '02-with-suggestions': async () => (await import('./02-with-suggestions')).AIChatInputWithSuggestions,
-} as const;

package/src/elements/AI/ChainOfThought/variations/01-basic/index.tsx

@@ -1,49 +0,0 @@
-"use client"
-import React from 'react';
-import { ThoughtStep } from './layout/ThoughtStep.js';
-
-export function BasicChainOfThought() {
-  const steps = [
-    {
-      number: 1,
-      title: 'Problem Analysis',
-      description: 'Breaking down the problem into manageable parts',
-    },
-    {
-      number: 2,
-      title: 'Strategy Development',
-      description: 'Developing a strategy to solve the problem',
-    },
-    {
-      number: 3,
-      title: 'Implementation',
-      description: 'Implementing the solution step by step',
-    },
-    {
-      number: 4,
-      title: 'Validation',
-      description: 'Validating the solution and checking results',
-    },
-  ];
-
-  return (
-    <div className="min-h-screen bg-background-950 p-8">
-      <div className="max-w-2xl mx-auto">
-        <h1 className="text-3xl font-bold text-foreground-50 mb-2">AI Reasoning Process</h1>
-        <p className="text-foreground-400 mb-8">Here's how the AI is thinking through the problem:</p>
-
-        <div className="space-y-4">
-          {steps.map((step) => (
-            <ThoughtStep key={step.number} {...step} />
-          ))}
-        </div>
-
-        <div className="mt-8 p-4 bg-background-800 border border-background-700 rounded-md">
-          <p className="text-sm text-foreground-300">
-            The chain of thought shows the reasoning process, making it easier to understand how the AI arrived at the conclusion.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/elements/AI/ChainOfThought/variations/01-basic/layout/ThoughtStep.tsx

@@ -1,22 +0,0 @@
-interface ThoughtStepProps {
-  number: number;
-  title: string;
-  description: string;
-}
-
-export function ThoughtStep({ number, title, description }: ThoughtStepProps) {
-  return (
-    <div className="flex gap-4">
-      <div className="flex flex-col items-center">
-        <div className="w-10 h-10 rounded-full bg-accent-500 text-foreground-50 flex items-center justify-center font-bold text-sm">
-          {number}
-        </div>
-        {number < 4 && <div className="w-1 h-8 bg-accent-500 mt-2" />}
-      </div>
-      <div className="flex-1 pt-1 pb-4">
-        <h3 className="font-semibold text-foreground-50 mb-1">{title}</h3>
-        <p className="text-sm text-foreground-400">{description}</p>
-      </div>
-    </div>
-  );
-}

package/src/elements/AI/ChainOfThought/variations/02-with-details/index.tsx

@@ -1,80 +0,0 @@
-"use client"
-import React, { useState } from 'react';
-import { ExpandableThoughtStep } from './layout/ExpandableThoughtStep.js';
-
-export function ChainOfThoughtWithDetails() {
-  const [expandedSteps, setExpandedSteps] = useState<Set<number>>(new Set([1]));
-
-  const steps = [
-    {
-      number: 1,
-      title: 'Understanding the Request',
-      description: 'Parsing and understanding what the user is asking for',
-      details: [
-        'Identified key requirements from the input',
-        'Recognized the problem domain',
-        'Determined necessary context and constraints',
-      ],
-    },
-    {
-      number: 2,
-      title: 'Analyzing Available Approaches',
-      description: 'Evaluating different methods to solve the problem',
-      details: [
-        'Approach A: Direct computation (Fast but limited)',
-        'Approach B: Iterative refinement (Balanced)',
-        'Approach C: Machine learning (Slow but accurate)',
-      ],
-    },
-    {
-      number: 3,
-      title: 'Selecting Optimal Strategy',
-      description: 'Choosing the best approach based on constraints',
-      details: [
-        'Evaluated trade-offs between speed and accuracy',
-        'Considered resource constraints',
-        'Selected Approach B for optimal balance',
-      ],
-    },
-    {
-      number: 4,
-      title: 'Generating Solution',
-      description: 'Implementing the chosen strategy step by step',
-      details: [
-        'Breaking down into sub-tasks',
-        'Validating intermediate results',
-        'Optimizing for performance',
-      ],
-    },
-  ];
-
-  const toggleStep = (number: number) => {
-    const newExpanded = new Set(expandedSteps);
-    if (newExpanded.has(number)) {
-      newExpanded.delete(number);
-    } else {
-      newExpanded.add(number);
-    }
-    setExpandedSteps(newExpanded);
-  };
-
-  return (
-    <div className="min-h-screen bg-background-950 p-8">
-      <div className="max-w-2xl mx-auto">
-        <h1 className="text-3xl font-bold text-foreground-50 mb-2">Detailed AI Reasoning</h1>
-        <p className="text-foreground-400 mb-8">Click steps to see detailed reasoning:</p>
-
-        <div className="space-y-3">
-          {steps.map((step) => (
-            <ExpandableThoughtStep
-              key={step.number}
-              {...step}
-              isExpanded={expandedSteps.has(step.number)}
-              onToggle={() => toggleStep(step.number)}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/elements/AI/ChainOfThought/variations/02-with-details/layout/ExpandableThoughtStep.tsx

@@ -1,48 +0,0 @@
-interface ExpandableThoughtStepProps {
-  number: number;
-  title: string;
-  description: string;
-  details: string[];
-  isExpanded: boolean;
-  onToggle: () => void;
-}
-
-export function ExpandableThoughtStep({
-  number,
-  title,
-  description,
-  details,
-  isExpanded,
-  onToggle,
-}: ExpandableThoughtStepProps) {
-  return (
-    <div className="bg-background-800 border border-background-700 rounded-md overflow-hidden">
-      <button
-        onClick={onToggle}
-        className="w-full flex items-start gap-4 p-4 hover:bg-background-700/50 transition-colors text-left"
-      >
-        <div className="w-10 h-10 rounded-full bg-accent-500 text-foreground-50 flex items-center justify-center font-bold text-sm flex-shrink-0">
-          {number}
-        </div>
-        <div className="flex-1 pt-1">
-          <h3 className="font-semibold text-foreground-50 mb-1">{title}</h3>
-          <p className="text-sm text-foreground-400">{description}</p>
-        </div>
-        <span className="text-foreground-400 flex-shrink-0 mt-1">{isExpanded ? '▼' : '▶'}</span>
-      </button>
-
-      {isExpanded && (
-        <div className="border-t border-background-700 bg-background-700/30 p-4">
-          <ul className="space-y-2">
-            {details.map((detail, index) => (
-              <li key={index} className="flex gap-3 text-sm text-foreground-300">
-                <span className="text-accent-400 flex-shrink-0">•</span>
-                <span>{detail}</span>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/elements/AI/ChainOfThought/variations/index.ts

@@ -1,18 +0,0 @@
-// Export all variation components
-export { BasicChainOfThought } from './01-basic/index.js';
-export { ChainOfThoughtWithDetails } from './02-with-details/index.js';
-
-// Type for all variations
-export type ChainOfThoughtVariations = 'BasicChainOfThought' | 'ChainOfThoughtWithDetails';
-
-// Demo path mapping for dynamic imports and routing
-export const DEMO_MAP = {
-  'chain-of-thought-basic': { key: '01-basic', export: 'BasicChainOfThought' },
-  'chain-of-thought-details': { key: '02-with-details', export: 'ChainOfThoughtWithDetails' },
-} as const;
-
-// Component map for internal use
-export const variationComponentMap = {
-  '01-basic': async () => (await import('./01-basic')).BasicChainOfThought,
-  '02-with-details': async () => (await import('./02-with-details')).ChainOfThoughtWithDetails,
-} as const;

package/src/elements/AI/Chat/variations/01-basic/index.tsx

@@ -1,54 +0,0 @@
-"use client"
-import React, { useState } from 'react';
-import { ChatContainer } from './layout/ChatContainer.js';
-import { ChatMessage } from './layout/ChatMessage.js';
-import { ChatInput } from './layout/ChatInput.js';
-
-interface Message {
-  id: string;
-  content: string;
-  sender: 'ai' | 'user';
-}
-
-export function BasicChat() {
-  const [messages, setMessages] = useState<Message[]>([
-    { id: '1', content: 'Hello! How can I assist you today?', sender: 'ai' },
-    { id: '2', content: 'I need help with my project', sender: 'user' },
-    { id: '3', content: 'Sure! Tell me more about what you need help with.', sender: 'ai' },
-  ]);
-
-  const handleSendMessage = (content: string) => {
-    const userMessage = {
-      id: String(messages.length + 1),
-      content,
-      sender: 'user' as const,
-    };
-    setMessages([...messages, userMessage]);
-
-    setTimeout(() => {
-      const aiMessage = {
-        id: String(messages.length + 2),
-        content: 'That sounds interesting! I can help you with that.',
-        sender: 'ai' as const,
-      };
-      setMessages((prev) => [...prev, aiMessage]);
-    }, 500);
-  };
-
-  return (
-    <div className="min-h-screen bg-background-950 p-8">
-      <div className="max-w-2xl mx-auto h-96">
-        <ChatContainer>
-          <div className="flex-1 overflow-y-auto space-y-4 p-4">
-            {messages.map((message) => (
-              <ChatMessage key={message.id} message={message.content} sender={message.sender} />
-            ))}
-          </div>
-          <div className="border-t border-background-700 p-4">
-            <ChatInput onSendMessage={handleSendMessage} />
-          </div>
-        </ChatContainer>
-      </div>
-    </div>
-  );
-}

package/src/elements/AI/Chat/variations/01-basic/layout/ChatContainer.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-
-interface ChatContainerProps {
-  children: React.ReactNode;
-}
-
-export function ChatContainer({ children }: ChatContainerProps) {
-  return (
-    <div className="flex flex-col h-full bg-background-800 border border-background-700 rounded-md overflow-hidden">
-      {children}
-    </div>
-  );
-}

package/src/elements/AI/Chat/variations/01-basic/layout/ChatInput.tsx

@@ -1,35 +0,0 @@
-import React, { useState } from 'react';
-
-interface ChatInputProps {
-  onSendMessage: (message: string) => void;
-}
-
-export function ChatInput({ onSendMessage }: ChatInputProps) {
-  const [input, setInput] = useState('');
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (input.trim()) {
-      onSendMessage(input);
-      setInput('');
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="flex gap-2">
-      <input
-        type="text"
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-        placeholder="Type a message..."
-        className="flex-1 bg-background-700 border border-background-600 rounded px-3 py-2 text-sm text-foreground-50 placeholder-foreground-400 focus:outline-none focus:border-accent-500"
-      />
-      <button
-        type="submit"
-        className="px-4 py-2 bg-accent-500 text-foreground-50 rounded font-medium hover:bg-accent-600 transition-colors text-sm"
-      >
-        Send
-      </button>
-    </form>
-  );
-}

package/src/elements/AI/Chat/variations/01-basic/layout/ChatMessage.tsx

@@ -1,20 +0,0 @@
-interface ChatMessageProps {
-  message: string;
-  sender: 'user' | 'ai';
-}
-
-export function ChatMessage({ message, sender }: ChatMessageProps) {
-  return (
-    <div className={`flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`}>
-      <div
-        className={`max-w-xs px-4 py-2 rounded-lg text-sm ${
-          sender === 'user'
-            ? 'bg-accent-500 text-foreground-50'
-            : 'bg-background-700 text-foreground-300'
-        }`}
-      >
-        {message}
-      </div>
-    </div>
-  );
-}

package/src/elements/AI/Chat/variations/02-with-actions/index.tsx

@@ -1,83 +0,0 @@
-"use client"
-import React, { useState } from 'react';
-import { ChatContainerWithActions } from './layout/ChatContainerWithActions.js';
-import { ChatMessage } from './layout/ChatMessage.js';
-import { ChatInputWithActions } from './layout/ChatInputWithActions.js';
-
-interface Message {
-  id: string;
-  content: string;
-  sender: 'ai' | 'user';
-}
-
-export function ChatWithActions() {
-  const [messages, setMessages] = useState<Message[]>([
-    { id: '1', content: 'Hello! I can help you with questions or tasks.', sender: 'ai' },
-    { id: '2', content: 'Can you help me with debugging?', sender: 'user' },
-    { id: '3', content: 'Absolutely! I can help you debug your code. What issue are you facing?', sender: 'ai' },
-  ]);
-
-  const handleSendMessage = (content: string) => {
-    const userMessage = {
-      id: String(messages.length + 1),
-      content,
-      sender: 'user' as const,
-    };
-    setMessages([...messages, userMessage]);
-
-    setTimeout(() => {
-      const aiMessage = {
-        id: String(messages.length + 2),
-        content: 'I can help with that. Let me analyze your code.',
-        sender: 'ai' as const,
-      };
-      setMessages((prev) => [...prev, aiMessage]);
-    }, 500);
-  };
-
-  const handleAction = (action: string) => {
-    const actionMessage = {
-      id: String(messages.length + 1),
-      content: `[Action: ${action}]`,
-      sender: 'user' as const,
-    };
-    setMessages([...messages, actionMessage]);
-  };
-
-  return (
-    <div className="min-h-screen bg-background-950 p-8">
-      <div className="max-w-2xl mx-auto h-96">
-        <ChatContainerWithActions>
-          <div className="flex-1 overflow-y-auto space-y-4 p-4">
-            {messages.map((message) => (
-              <ChatMessage key={message.id} message={message.content} sender={message.sender} />
-            ))}
-          </div>
-          <div className="border-t border-background-700 p-4 bg-background-700/50">
-            <div className="flex gap-2 mb-3 flex-wrap">
-              <button
-                onClick={() => handleAction('Copy code')}
-                className="px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-sm transition-colors"
-              >
-                📋 Copy
-              </button>
-              <button
-                onClick={() => handleAction('Explain')}
-                className="px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-sm transition-colors"
-              >
-                💡 Explain
-              </button>
-              <button
-                onClick={() => handleAction('Refactor')}
-                className="px-2 py-1 bg-background-700 hover:bg-background-600 text-foreground-400 hover:text-foreground-300 rounded text-sm transition-colors"
-              >
-                ✨ Refactor
-              </button>
-            </div>
-            <ChatInputWithActions onSendMessage={handleSendMessage} />
-          </div>
-        </ChatContainerWithActions>
-      </div>
-    </div>
-  );
-}