103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
import { Send, AlertCircle } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
|
import { TabsContent } from "@/components/ui/tabs";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
|
|
export type Prompt = {
|
|
id: string;
|
|
name: string;
|
|
};
|
|
|
|
const PromptsTab = ({
|
|
prompts,
|
|
listPrompts,
|
|
getPrompt,
|
|
selectedPrompt,
|
|
setSelectedPrompt,
|
|
promptContent,
|
|
error,
|
|
}: {
|
|
prompts: Prompt[];
|
|
listPrompts: () => void;
|
|
getPrompt: (name: string) => void;
|
|
selectedPrompt: Prompt | null;
|
|
setSelectedPrompt: (prompt: Prompt) => void;
|
|
promptContent: string;
|
|
error: string | null;
|
|
}) => {
|
|
return (
|
|
<TabsContent value="prompts" className="grid grid-cols-2 gap-4">
|
|
<div className="bg-white rounded-lg shadow">
|
|
<div className="p-4 border-b border-gray-200">
|
|
<h3 className="font-semibold">Prompts</h3>
|
|
</div>
|
|
<div className="p-4">
|
|
<Button
|
|
variant="outline"
|
|
className="w-full mb-4"
|
|
onClick={listPrompts}
|
|
>
|
|
List Prompts
|
|
</Button>
|
|
<div className="space-y-2">
|
|
{prompts.map((prompt) => (
|
|
<div
|
|
key={prompt.id}
|
|
className="flex items-center p-2 rounded hover:bg-gray-50 cursor-pointer"
|
|
onClick={() => {
|
|
setSelectedPrompt(prompt);
|
|
getPrompt(prompt.name);
|
|
}}
|
|
>
|
|
<span className="flex-1">{prompt.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg shadow">
|
|
<div className="p-4 border-b border-gray-200">
|
|
<h3 className="font-semibold">
|
|
{selectedPrompt ? selectedPrompt.name : "Select a prompt"}
|
|
</h3>
|
|
</div>
|
|
<div className="p-4">
|
|
{error ? (
|
|
<Alert variant="destructive">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertTitle>Error</AlertTitle>
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
) : selectedPrompt ? (
|
|
<div className="space-y-4">
|
|
<Textarea
|
|
value={promptContent}
|
|
readOnly
|
|
className="h-64 font-mono"
|
|
/>
|
|
<div className="flex space-x-2">
|
|
<Input placeholder="Enter your message" />
|
|
<Button>
|
|
<Send className="w-4 h-4 mr-2" />
|
|
Send
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<Alert>
|
|
<AlertDescription>
|
|
Select a prompt from the list to view and use it
|
|
</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
);
|
|
};
|
|
|
|
export default PromptsTab;
|