87 lines
4.1 KiB
TypeScript
87 lines
4.1 KiB
TypeScript
import clsx from "clsx";
|
|
import { X } from "lucide-preact";
|
|
import { useState } from "preact/hooks";
|
|
import styles from "../assets/settings-modal.module.css";
|
|
import { BannedTokensSettings } from "./settings/banned-tokens";
|
|
import { ChatSystemInstructionSettings } from "./settings/chat-system-instruction";
|
|
import { ContinuePromptSettings } from "./settings/continue-prompt";
|
|
import { ConnectionSettings } from "./settings/connection";
|
|
import { SystemInstructionSettings } from "./settings/system-instruction";
|
|
import { UserSettings } from "./settings/user";
|
|
|
|
interface Props {
|
|
onClose: () => void;
|
|
}
|
|
|
|
type Tab = "banned-tokens" | "system-instruction" | "chat-system-instruction" | "continue-prompt" | "connection" | "user";
|
|
|
|
export const SettingsModal = ({ onClose }: Props) => {
|
|
const [activeTab, setActiveTab] = useState<Tab>("connection");
|
|
|
|
return (
|
|
<div class={styles.overlay} onClick={onClose}>
|
|
<div class={styles.modal} onClick={(e) => e.stopPropagation()}>
|
|
<div class={styles.header}>
|
|
<h2 class={styles.title}>Settings</h2>
|
|
<button class={styles.closeButton} onClick={onClose}>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
<div class={styles.body}>
|
|
<nav class={styles.sidebar}>
|
|
<button
|
|
class={clsx(styles.menuItem, activeTab === "connection" && styles.active)}
|
|
onClick={() => setActiveTab("connection")}
|
|
>
|
|
Connection
|
|
</button>
|
|
<button
|
|
class={clsx(styles.menuItem, activeTab === "user" && styles.active)}
|
|
onClick={() => setActiveTab("user")}
|
|
>
|
|
User
|
|
</button>
|
|
<button
|
|
class={clsx(styles.menuItem, activeTab === "system-instruction" && styles.active)}
|
|
onClick={() => setActiveTab("system-instruction")}
|
|
>
|
|
System Instruction
|
|
</button>
|
|
<button
|
|
class={clsx(styles.menuItem, activeTab === "continue-prompt" && styles.active)}
|
|
onClick={() => setActiveTab("continue-prompt")}
|
|
>
|
|
Continue Prompt
|
|
</button>
|
|
<button
|
|
class={clsx(styles.menuItem, activeTab === "chat-system-instruction" && styles.active)}
|
|
onClick={() => setActiveTab("chat-system-instruction")}
|
|
>
|
|
Chat System Instruction
|
|
</button>
|
|
<button
|
|
class={clsx(styles.menuItem, activeTab === "banned-tokens" && styles.active)}
|
|
onClick={() => setActiveTab("banned-tokens")}
|
|
>
|
|
Banned Tokens
|
|
</button>
|
|
</nav>
|
|
<div class={styles.content}>
|
|
{activeTab === "user" && <UserSettings />}
|
|
{activeTab === "banned-tokens" && <BannedTokensSettings />}
|
|
{activeTab === "system-instruction" && <SystemInstructionSettings />}
|
|
{activeTab === "chat-system-instruction" && <ChatSystemInstructionSettings />}
|
|
{activeTab === "continue-prompt" && <ContinuePromptSettings />}
|
|
{activeTab === "connection" && <ConnectionSettings />}
|
|
</div>
|
|
</div>
|
|
<div class={styles.footer}>
|
|
<button onClick={onClose} class={clsx(styles.button, styles.buttonSecondary)}>
|
|
Done
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|