Upload components directory - minimal build

code-editor.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { Editor } from '@monaco-editor/react';
+import { cn } from '@/lib/utils';
+
+interface CodeEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  className?: string;
+  language?: string;
+  theme?: string;
+}
+
+export function CodeEditor({
+  value,
+  onChange,
+  className,
+  language = 'javascript',
+  theme = 'vs-dark'
+}: CodeEditorProps) {
+  const editorRef = useRef<any>(null);
+
+  const handleEditorDidMount = (editor: any) => {
+    editorRef.current = editor;
+    
+    // Configure editor options
+    editor.updateOptions({
+      fontSize: 14,
+      fontFamily: 'JetBrains Mono, Monaco, Consolas, "Courier New", monospace',
+      minimap: { enabled: false },
+      scrollBeyondLastLine: false,
+      wordWrap: 'on',
+      automaticLayout: true,
+      tabSize: 2,
+      insertSpaces: true,
+      roundedSelection: false,
+      readOnly: false,
+      cursorStyle: 'line',
+      lineNumbers: 'on',
+      renderLineHighlight: 'line',
+      selectOnLineNumbers: true,
+      roundedSelection: false,
+      renderIndentGuides: true,
+      colorDecorators: true,
+      lineDecorationsWidth: 0,
+      lineNumbersMinChars: 3,
+      folding: true,
+      foldingHighlight: true,
+      showFoldingControls: 'mouseover',
+      smoothScrolling: true,
+      contextmenu: true,
+      mouseWheelZoom: true,
+    });
+
+    // Add custom key bindings
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+      // Handle save action
+      console.log('Save action triggered');
+    });
+
+    // Add code completion suggestions
+    const suggestions = [
+      {
+        label: 'console.log',
+        kind: monaco.languages.CompletionItemKind.Function,
+        insertText: 'console.log(${1:message});',
+        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+        documentation: 'Log a message to the console'
+      },
+      {
+        label: 'function',
+        kind: monaco.languages.CompletionItemKind.Snippet,
+        insertText: 'function ${1:functionName}(${2:params}) {\n\t${3:// function body}\n}',
+        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+        documentation: 'Create a function'
+      },
+      {
+        label: 'if',
+        kind: monaco.languages.CompletionItemKind.Snippet,
+        insertText: 'if (${1:condition}) {\n\t${2:// code}\n}',
+        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+        documentation: 'Create an if statement'
+      }
+    ];
+
+    // Register completion provider
+    const completionProvider = {
+      provideCompletionItems: () => ({
+        suggestions: suggestions.map(suggestion => ({
+          ...suggestion,
+          range: undefined
+        }))
+      })
+    };
+
+    // Register the completion provider
+    const disposable = monaco.languages.registerCompletionItemProvider(language, completionProvider);
+    
+    // Cleanup on unmount
+    return () => {
+      disposable.dispose();
+    };
+  };
+
+  const handleEditorChange = (value: string | undefined) => {
+    if (value !== undefined) {
+      onChange(value);
+    }
+  };
+
+  return (
+    <div className={cn("monaco-editor-container", className)}>
+      <Editor
+        height="100%"
+        defaultLanguage={language}
+        theme={theme}
+        value={value}
+        onChange={handleEditorChange}
+        onMount={handleEditorDidMount}
+        options={{
+          selectOnLineNumbers: true,
+          roundedSelection: false,
+          readOnly: false,
+          cursorStyle: 'line',
+          automaticLayout: true,
+          wordWrap: 'on',
+          minimap: { enabled: false },
+          scrollBeyondLastLine: false,
+          fontSize: 14,
+          fontFamily: 'JetBrains Mono, Monaco, Consolas, "Courier New", monospace',
+          tabSize: 2,
+          insertSpaces: true,
+          renderLineHighlight: 'line',
+          lineNumbers: 'on',
+          contextmenu: true,
+          mouseWheelZoom: true,
+          smoothScrolling: true,
+          folding: true,
+          foldingHighlight: true,
+          showFoldingControls: 'mouseover',
+        }}
+      />
+    </div>
+  );
+}

conversation-panel.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { MessageSquare, Copy, ThumbsUp, ThumbsDown, RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface ConversationPanelProps {
+  completion: string;
+  isLoading: boolean;
+  className?: string;
+}
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+  feedback?: 'positive' | 'negative';
+}
+
+export function ConversationPanel({ completion, isLoading, className }: ConversationPanelProps) {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [currentMessage, setCurrentMessage] = useState<string>('');
+
+  // Update messages when completion changes
+  useEffect(() => {
+    if (completion) {
+      const newMessage: Message = {
+        id: Date.now().toString(),
+        role: 'assistant',
+        content: completion,
+        timestamp: new Date(),
+      };
+      setMessages(prev => [...prev, newMessage]);
+    }
+  }, [completion]);
+
+  // Update current message during streaming
+  useEffect(() => {
+    if (isLoading && completion) {
+      setCurrentMessage(completion);
+    } else if (!isLoading) {
+      setCurrentMessage('');
+    }
+  }, [completion, isLoading]);
+
+  const handleCopy = (content: string) => {
+    navigator.clipboard.writeText(content);
+  };
+
+  const handleFeedback = (messageId: string, feedback: 'positive' | 'negative') => {
+    setMessages(prev => prev.map(msg => 
+      msg.id === messageId ? { ...msg, feedback } : msg
+    ));
+  };
+
+  const formatCode = (content: string) => {
+    // Simple code block formatting
+    const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
+    let formatted = content;
+    let match;
+    
+    const parts: Array<{ type: 'text' | 'code'; content: string; language?: string }> = [];
+    let lastIndex = 0;
+    
+    while ((match = codeBlockRegex.exec(content)) !== null) {
+      if (match.index > lastIndex) {
+        parts.push({ type: 'text', content: content.slice(lastIndex, match.index) });
+      }
+      parts.push({ 
+        type: 'code', 
+        content: match[2].trim(), 
+        language: match[1] || 'javascript' 
+      });
+      lastIndex = match.index + match[0].length;
+    }
+    
+    if (lastIndex < content.length) {
+      parts.push({ type: 'text', content: content.slice(lastIndex) });
+    }
+    
+    return parts.length > 0 ? parts : [{ type: 'text', content }];
+  };
+
+  return (
+    <div className={cn("flex flex-col h-full", className)}>
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto space-y-4 mb-4 max-h-[400px] code-area">
+        {messages.length === 0 && !isLoading && (
+          <div className="flex items-center justify-center h-full text-muted-foreground">
+            <div className="text-center">
+              <MessageSquare className="w-12 h-12 mx-auto mb-4 opacity-50" />
+              <p className="text-lg font-medium mb-2">Start a conversation</p>
+              <p className="text-sm">
+                Ask me to help with your code, generate functions, debug issues, or discuss programming concepts.
+              </p>
+            </div>
+          </div>
+        )}
+
+        {messages.map((message) => (
+          <Card key={message.id} className="relative">
+            <CardContent className="p-4">
+              <div className="flex items-start justify-between mb-3">
+                <div className="flex items-center gap-2">
+                  <Badge 
+                    variant={message.role === 'assistant' ? 'default' : 'secondary'}
+                    className="text-xs"
+                  >
+                    {message.role === 'assistant' ? 'AI Assistant' : 'You'}
+                  </Badge>
+                  <span className="text-xs text-muted-foreground">
+                    {message.timestamp.toLocaleTimeString()}
+                  </span>
+                </div>
+                
+                <div className="flex items-center gap-1">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleCopy(message.content)}
+                    className="h-6 w-6 p-0"
+                  >
+                    <Copy className="w-3 h-3" />
+                  </Button>
+                  
+                  {message.role === 'assistant' && (
+                    <>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleFeedback(message.id, 'positive')}
+                        className={cn(
+                          "h-6 w-6 p-0",
+                          message.feedback === 'positive' && "text-green-600"
+                        )}
+                      >
+                        <ThumbsUp className="w-3 h-3" />
+                      </Button>
+                      
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleFeedback(message.id, 'negative')}
+                        className={cn(
+                          "h-6 w-6 p-0",
+                          message.feedback === 'negative' && "text-red-600"
+                        )}
+                      >
+                        <ThumbsDown className="w-3 h-3" />
+                      </Button>
+                    </>
+                  )}
+                </div>
+              </div>
+              
+              <div className="prose prose-sm max-w-none">
+                {formatCode(message.content).map((part, index) => (
+                  <div key={index}>
+                    {part.type === 'code' ? (
+                      <div className="relative">
+                        <Badge variant="outline" className="text-xs mb-2">
+                          {part.language}
+                        </Badge>
+                        <pre className="bg-muted p-3 rounded-md overflow-x-auto text-sm">
+                          <code>{part.content}</code>
+                        </pre>
+                      </div>
+                    ) : (
+                      <div className="whitespace-pre-wrap text-sm leading-relaxed">
+                        {part.content}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+
+        {/* Current streaming message */}
+        {isLoading && currentMessage && (
+          <Card className="relative border-dashed">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-2 mb-3">
+                <Badge variant="default" className="text-xs">
+                  <RefreshCw className="w-3 h-3 mr-1 animate-spin" />
+                  AI Assistant
+                </Badge>
+                <span className="text-xs text-muted-foreground">Thinking...</span>
+              </div>
+              
+              <div className="prose prose-sm max-w-none">
+                {formatCode(currentMessage).map((part, index) => (
+                  <div key={index}>
+                    {part.type === 'code' ? (
+                      <div className="relative">
+                        <Badge variant="outline" className="text-xs mb-2">
+                          {part.language}
+                        </Badge>
+                        <pre className="bg-muted p-3 rounded-md overflow-x-auto text-sm opacity-75">
+                          <code>{part.content}</code>
+                        </pre>
+                      </div>
+                    ) : (
+                      <div className="whitespace-pre-wrap text-sm leading-relaxed opacity-75">
+                        {part.content}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}

model-selector.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { useState } from 'react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
+import { Settings, Cpu, Zap, Brain } from 'lucide-react';
+
+interface ModelSelectorProps {
+  selectedModel: string;
+  onModelChange: (model: string) => void;
+  models: string[];
+}
+
+const modelIcons: Record<string, React.ReactNode> = {
+  'deepseek-ai': <Brain className="w-3 h-3" />,
+  'Qwen': <Cpu className="w-3 h-3" />,
+  'moonshotai': <Zap className="w-3 h-3" />,
+  'zai-org': <Settings className="w-3 h-3" />,
+  'MiniMaxAI': <Brain className="w-3 h-3" />,
+  'meta-llama': <Cpu className="w-3 h-3" />,
+  'google': <Brain className="w-3 h-3" />,
+};
+
+const getProviderFromModel = (modelName: string): string => {
+  if (modelName.includes('deepseek-ai') || modelName.includes('Qwen') || 
+      modelName.includes('moonshotai') || modelName.includes('zai-org') || 
+      modelName.includes('MiniMaxAI') || modelName.includes('meta-llama') || 
+      modelName.includes('google')) {
+    return 'Hugging Face';
+  }
+  return 'Unknown';
+};
+
+const getModelCategory = (modelName: string): string => {
+  if (modelName.includes('DeepSeek')) return 'Reasoning';
+  if (modelName.includes('Coder')) return 'Code';
+  if (modelName.includes('VL')) return 'Vision';
+  if (modelName.includes('Kimi') && modelName.includes('Thinking')) return 'Reasoning';
+  if (modelName.includes('Kimi')) return 'General';
+  if (modelName.includes('GLM')) return 'General';
+  return 'Language';
+};
+
+const getDisplayName = (modelName: string): string => {
+  const parts = modelName.split('/');
+  const model = parts[1] || modelName;
+  
+  // Clean up model names for better display
+  const cleanName = model
+    .replace('-0324', '')
+    .replace('-0528', '')
+    .replace('-0905', '')
+    .replace('-Instruct', '')
+    .replace('-A22B', '')
+    .replace('-A35B', '')
+    .replace('-VL-7B', '')
+    .replace('-Exp', '')
+    .replace('-Distill-', '-')
+    .replace('-Terminus', '')
+    .replace('DeepSeek-V3-0324', 'DeepSeek V3')
+    .replace('DeepSeek-R1-0528', 'DeepSeek R1')
+    .replace('DeepSeek-V3.1', 'DeepSeek V3.1')
+    .replace('DeepSeek-V3.1-Terminus', 'DeepSeek V3.1 Terminus')
+    .replace('DeepSeek-V3.2-Exp', 'DeepSeek V3.2 Exp')
+    .replace('Qwen3-Coder-480B-A35B-Instruct', 'Qwen3 Coder 480B')
+    .replace('Qwen2.5-VL-7B-Instruct', 'Qwen2.5 VL 7B')
+    .replace('Kimi-K2-Instruct', 'Kimi K2')
+    .replace('Kimi-K2-Instruct-0905', 'Kimi K2 0905')
+    .replace('Kimi-K2-Thinking', 'Kimi K2 Thinking')
+    .replace('GLM-4.6', 'GLM-4.6')
+    .replace('MiniMax-M2', 'MiniMax M2')
+    .replace('Llama-3.1-8B-Instruct', 'Llama 3.1 8B')
+    .replace('Llama-3.1-70B-Instruct', 'Llama 3.1 70B')
+    .replace('Llama-3.3-70B-Instruct', 'Llama 3.3 70B')
+    .replace('Llama-4-Scout-17B-16E-Instruct', 'Llama 4 Scout 17B')
+    .replace('gemma-3-27b-it', 'Gemma 3 27B');
+  
+  return cleanName;
+};
+
+export function ModelSelector({ selectedModel, onModelChange, models }: ModelSelectorProps) {
+  const [open, setOpen] = useState(false);
+
+  const getIconForModel = (modelName: string) => {
+    for (const [key, icon] of Object.entries(modelIcons)) {
+      if (modelName.includes(key)) {
+        return icon;
+      }
+    }
+    return <Brain className="w-3 h-3" />;
+  };
+
+  const groupModelsByProvider = () => {
+    const groups: Record<string, string[]> = {};
+    
+    models.forEach(model => {
+      const provider = getProviderFromModel(model);
+      if (!groups[provider]) {
+        groups[provider] = [];
+      }
+      groups[provider].push(model);
+    });
+    
+    return groups;
+  };
+
+  const groupedModels = groupModelsByProvider();
+
+  return (
+    <Select
+      value={selectedModel}
+      onValueChange={onModelChange}
+      onOpenChange={setOpen}
+    >
+      <SelectTrigger className="w-[280px]">
+        <div className="flex items-center gap-2 truncate">
+          {getIconForModel(selectedModel)}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <span className="font-medium truncate">
+                {getDisplayName(selectedModel)}
+              </span>
+              <Badge variant="outline" className="text-xs">
+                {getModelCategory(selectedModel)}
+              </Badge>
+            </div>
+            <div className="text-xs text-muted-foreground truncate">
+              {getProviderFromModel(selectedModel)}
+            </div>
+          </div>
+        </div>
+      </SelectTrigger>
+      
+      <SelectContent>
+        {Object.entries(groupedModels).map(([provider, providerModels]) => (
+          <div key={provider}>
+            <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground border-b">
+              {provider}
+            </div>
+            {providerModels.map((model) => (
+              <SelectItem key={model} value={model}>
+                <div className="flex items-center gap-2 w-full">
+                  {getIconForModel(model)}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium truncate">
+                        {getDisplayName(model)}
+                      </span>
+                      <Badge variant="outline" className="text-xs flex-shrink-0">
+                        {getModelCategory(model)}
+                      </Badge>
+                    </div>
+                    <div className="text-xs text-muted-foreground truncate">
+                      {model}
+                    </div>
+                  </div>
+                </div>
+              </SelectItem>
+            ))}
+          </div>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

providers.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { ReactNode } from 'react';
+
+interface ProvidersProps {
+  children: ReactNode;
+}
+
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <div>
+      {children}
+    </div>
+  );
+}
+
+// Temporary simple provider until we fix AI SDK dependencies
+export const supportedModels = {};

ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

ui/select.tsx

@@ -0,0 +1,158 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }