File size: 5,187 Bytes
1425cf0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { Brain, MessageSquare } from 'lucide-react'
interface SystemInstructionsTabProps {
systemPrompt: string
setSystemPrompt: (prompt: string) => void
isLoading: boolean
}
export function SystemInstructionsTab({
systemPrompt,
setSystemPrompt,
isLoading
}: SystemInstructionsTabProps) {
const promptExamples = [
{
title: "Helpful Assistant",
prompt: "You are a helpful, harmless, and honest AI assistant. Provide clear, accurate, and well-structured responses. If you're unsure about something, say so."
},
{
title: "Code Expert",
prompt: "You are an expert software developer. Provide clean, efficient code with clear explanations. Always follow best practices and include helpful comments."
},
{
title: "Creative Writer",
prompt: "You are a creative writer. Use vivid language, engaging storytelling, and imaginative descriptions. Be expressive and artistic in your responses."
},
{
title: "Teacher/Tutor",
prompt: "You are a patient and knowledgeable teacher. Break down complex concepts into simple, understandable parts. Use examples and analogies to help explain ideas."
}
]
const bestPractices = [
"Be specific about the assistant's role and expertise",
"Include desired communication style and tone",
"Specify output format if needed (lists, paragraphs, etc.)",
"Add ethical guidelines and behavior expectations"
]
return (
<div className="space-y-4 pb-6">
<Card>
<CardHeader>
<CardTitle className="text-base">System Instructions</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
<Label className="text-base font-medium text-blue-700">
System Prompt
</Label>
<textarea
value={systemPrompt}
onChange={(e) => setSystemPrompt(e.target.value)}
placeholder="Define your AI assistant's role, personality, and behavior..."
className="w-full h-[250px] text-base p-4 border-2 border-blue-200 rounded-lg bg-white focus:border-blue-400 focus:ring-2 focus:ring-blue-100 resize-none overflow-y-auto"
disabled={isLoading}
/>
{/* Character count */}
<div className="text-xs text-muted-foreground text-right">
{systemPrompt.length} characters
</div>
</div>
</CardContent>
</Card>
{/* Quick Examples */}
<Card>
<CardHeader>
<CardTitle className="text-sm flex items-center">
<Brain className="h-4 w-4 mr-2" />
Quick Examples
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3">
<Label className="text-xs font-medium text-muted-foreground">
Choose a template to get started:
</Label>
<Select
value=""
onValueChange={(value) => {
const example = promptExamples[parseInt(value)]
if (example) {
setSystemPrompt(example.prompt)
}
}}
disabled={isLoading}
>
<SelectTrigger className="w-full h-10">
<SelectValue placeholder="Select example prompt..." />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Example Prompts</SelectLabel>
{promptExamples.map((example, index) => (
<SelectItem key={index} value={index.toString()}>
<div className="flex flex-col items-start">
<span className="font-medium text-sm">{example.title}</span>
<span className="text-xs text-muted-foreground line-clamp-1 mt-1">
{example.prompt.substring(0, 60)}...
</span>
</div>
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</div>
</CardContent>
</Card>
{/* Best Practices */}
<Card>
<CardHeader>
<CardTitle className="text-sm flex items-center">
<MessageSquare className="h-4 w-4 mr-2" />
Best Practices
</CardTitle>
</CardHeader>
<CardContent>
<ul className="text-xs space-y-2 text-muted-foreground">
{bestPractices.map((practice, index) => (
<li key={index} className="flex items-start">
<span className="inline-block w-1.5 h-1.5 bg-blue-400 rounded-full mt-1.5 mr-2 flex-shrink-0" />
{practice}
</li>
))}
</ul>
</CardContent>
</Card>
</div>
)
}
|