import { ContentEditable } from "@common/components/ContentEditable";
import { useInputCallback } from "@common/hooks/useInputCallback";
import clsx from "clsx";
import styles from "../../assets/settings-modal.module.css";
import { useAppState } from "../../contexts/state";

export const ChatSystemInstructionSettings = () => {
    const { chatSystemInstruction, dispatch } = useAppState();

    const setInstructionValue = useInputCallback((value) => {
        dispatch({ type: "SET_CHAT_SYSTEM_INSTRUCTION", chatSystemInstruction: value });
    }, []);

    return (
        <div class={styles.form}>
            <div class={clsx(styles.formGroup, styles.formGroupFill)}>
                <label class={styles.label}>Chat System Instruction</label>
                <ContentEditable
                    highlight
                    value={chatSystemInstruction}
                    onInput={setInstructionValue}
                    placeholder="Enter default system instruction for chat/roleplay worlds ({{char}}, {{user}} supported)..."
                    class={clsx(styles.input, styles.textarea)}
                />
            </div>
        </div>
    );
};
