You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import { JsonInput, Tabs, Textarea } from "@mantine/core";
|
|
import { useState } from "react";
|
|
|
|
const defaultSystemPrompt = `You are a helpful assistant that answers questions based on the provided context. If you don't know the answer, just say that you don't know, don't try to make up an answer.`;
|
|
const defaultParameters = {
|
|
temperature: 0.5,
|
|
max_tokens: 100,
|
|
};
|
|
|
|
export default function ChatPage() {
|
|
const [prompt, setPrompt] = useState("");
|
|
const [systemPrompt, setSystemPrompt] = useState(defaultSystemPrompt);
|
|
const [parameters, setParameters] = useState(defaultParameters);
|
|
|
|
return (
|
|
<Tabs defaultValue="prompt">
|
|
<Tabs.List>
|
|
<Tabs.Tab value="prompt">Prompt</Tabs.Tab>
|
|
<Tabs.Tab value="system-prompt">System Prompt</Tabs.Tab>
|
|
<Tabs.Tab value="parameters">Parameters</Tabs.Tab>
|
|
</Tabs.List>
|
|
<Tabs.Panel value="prompt">
|
|
<Textarea
|
|
resize="vertical"
|
|
placeholder="Type your message here..."
|
|
value={prompt}
|
|
onChange={(e) => setPrompt(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
console.log("Sending message...");
|
|
}
|
|
}}
|
|
/>
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value="system-prompt">
|
|
<Textarea
|
|
resize="vertical"
|
|
placeholder={defaultSystemPrompt}
|
|
value={systemPrompt}
|
|
onChange={(e) => setSystemPrompt(e.target.value)}
|
|
/>
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value="parameters">
|
|
<JsonInput
|
|
resize="vertical"
|
|
formatOnBlur
|
|
placeholder={JSON.stringify(defaultParameters)}
|
|
value={JSON.stringify(parameters)}
|
|
onChange={(value) => setParameters(JSON.parse(value))}
|
|
/>
|
|
</Tabs.Panel>
|
|
</Tabs>
|
|
);
|
|
}
|