60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
|
import { Conversation, Database, Message, Preset } from "types";
|
||
|
|
import RenderMsg from "components/RenderMsg.tsx";
|
||
|
|
|
||
|
|
//TODO: this might be the place to allow editing of presets,,,
|
||
|
|
//TODO: easier to just not allow editing presets lol
|
||
|
|
export default function PresetSelector({
|
||
|
|
selected,
|
||
|
|
setPreset,
|
||
|
|
conv,
|
||
|
|
db,
|
||
|
|
}: {
|
||
|
|
selected: string;
|
||
|
|
setPreset: (_: string) => void;
|
||
|
|
conv: Conversation;
|
||
|
|
db: Database;
|
||
|
|
}) {
|
||
|
|
//TODO: maybe return DB presets? not really necessary
|
||
|
|
const presets = Object.keys({ ...conv.presets });
|
||
|
|
return (
|
||
|
|
<div className="preset-selector">
|
||
|
|
{presets.map(p => (
|
||
|
|
<PresetOption
|
||
|
|
name={p}
|
||
|
|
selected={selected == p}
|
||
|
|
onSelect={setPreset}
|
||
|
|
conv={conv}
|
||
|
|
db={db}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function PresetOption({
|
||
|
|
name,
|
||
|
|
selected,
|
||
|
|
onSelect,
|
||
|
|
conv,
|
||
|
|
db,
|
||
|
|
}: {
|
||
|
|
name: string;
|
||
|
|
selected: boolean;
|
||
|
|
onSelect: (_: string) => void;
|
||
|
|
conv: Conversation;
|
||
|
|
db: Database;
|
||
|
|
}) {
|
||
|
|
const msg: Message = {
|
||
|
|
content: name == "" ? "default" : name,
|
||
|
|
preset: name,
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onClick={() => onSelect(name)}
|
||
|
|
className={`preset-option ${selected ? "selected" : ""}`}
|
||
|
|
>
|
||
|
|
<RenderMsg msg={msg} db={db} conversation={conv} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|