change: display llm config

resources/js/components/admin/admin-llm-form.tsx

@@ -51,8 +51,8 @@ function SearchableSelect({
         <div className="relative" ref={containerRef}>
             <button
                 className={cn(
-                    'border-input bg-background ring-offset-background flex h-9 w-full items-center justify-between rounded-md border px-3 py-2 text-sm',
-                    'focus:ring-ring focus:outline-none focus:ring-2 focus:ring-offset-2',
+                    'flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background',
+                    'focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none',
                     disabled && 'cursor-not-allowed opacity-50',
                 )}
                 disabled={disabled}
@@ -70,7 +70,7 @@ function SearchableSelect({
 
             {open && (
                 <div
-                    className="bg-popover text-popover-foreground absolute z-50 mt-1 w-full rounded-md border shadow-md"
+                    className="absolute z-50 mt-1 w-full rounded-md border bg-popover text-popover-foreground shadow-md"
                     onMouseDown={(e) => e.stopPropagation()}
                 >
                     <div className="border-b p-1">
@@ -91,8 +91,9 @@ function SearchableSelect({
                                 <button
                                     key={option}
                                     className={cn(
-                                        'hover:bg-accent hover:text-accent-foreground flex w-full items-center rounded-sm px-2 py-1.5 text-left text-sm',
-                                        value === option && 'bg-accent text-accent-foreground',
+                                        'flex w-full items-center rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-accent-foreground',
+                                        value === option &&
+                                            'bg-accent text-accent-foreground',
                                     )}
                                     type="button"
                                     onClick={() => {
@@ -192,7 +193,7 @@ function ApiKeyInput({
                 onChange={(e) => onChange(e.target.value)}
             />
             <button
-                className="text-muted-foreground hover:text-foreground absolute right-3 top-1/2 -translate-y-1/2"
+                className="absolute top-1/2 right-3 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                 type="button"
                 onClick={() => setShow((v) => !v)}
             >
@@ -227,7 +228,9 @@ export function AdminLlmForm({ llm }: { llm?: LlmConfig | null }) {
     });
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [error, setError] = useState<string | undefined>();
-    const [selectedTemplate, setSelectedTemplate] = useState<string>(initialSystemPromptKey);
+    const [selectedTemplate, setSelectedTemplate] = useState<string>(
+        initialSystemPromptKey,
+    );
 
     function setField<K extends keyof LlmForm>(
         key: K,
@@ -266,13 +269,17 @@ export function AdminLlmForm({ llm }: { llm?: LlmConfig | null }) {
                 };
             }
 
-            if (formData.active_model) payload.active_model = formData.active_model;
+            if (formData.active_model)
+                payload.active_model = formData.active_model;
             if (formData.api_key) payload.api_key = formData.api_key;
             payload.reasoning_effort = formData.reasoning_effort || null;
             if (formData.max_tokens)
                 payload.max_tokens = parseInt(formData.max_tokens, 10);
             if (formData.request_timeout)
-                payload.request_timeout = parseInt(formData.request_timeout, 10);
+                payload.request_timeout = parseInt(
+                    formData.request_timeout,
+                    10,
+                );
             if (formData.temperature)
                 payload.temperature = parseFloat(formData.temperature);
             if (formData.system_prompt) {
@@ -285,13 +292,15 @@ export function AdminLlmForm({ llm }: { llm?: LlmConfig | null }) {
 
             const savedProviders = result.providers ?? {};
             const savedSystemPrompts = result.system_prompts ?? {};
-            const savedKey = savedSystemPrompts[selectedTemplate] !== undefined
-                ? selectedTemplate
-                : (Object.keys(savedSystemPrompts)[0] ?? selectedTemplate);
+            const savedKey =
+                savedSystemPrompts[selectedTemplate] !== undefined
+                    ? selectedTemplate
+                    : (Object.keys(savedSystemPrompts)[0] ?? selectedTemplate);
 
             setSelectedTemplate(savedKey);
 
-            const savedProviderInfo = savedProviders[result.active_provider ?? ''];
+            const savedProviderInfo =
+                savedProviders[result.active_provider ?? ''];
             setFormData({
                 active_model: stringValue(result.active_model),
                 active_provider: stringValue(result.active_provider),
@@ -322,145 +331,238 @@ export function AdminLlmForm({ llm }: { llm?: LlmConfig | null }) {
         : [];
 
     return (
-        <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
-            <CardContent className="pt-6">
-                <form
-                    className="grid gap-4"
-                    onSubmit={(e) => {
-                        void handleSubmit(e);
-                    }}
-                >
-                    <ConfigError message={error} />
-
-                    <div className="grid gap-3 md:grid-cols-2">
-                        <Field
-                            current={llm?.active_provider}
-                            hint="Penyedia layanan AI yang digunakan untuk menjawab pertanyaan."
-                            label="Provider"
-                        >
-                            <Select
-                                value={formData.active_provider}
-                                onValueChange={handleProviderChange}
+        <form
+            className="grid gap-4"
+            onSubmit={(e) => {
+                void handleSubmit(e);
+            }}
+        >
+            <ConfigError message={error} />
+
+            {/* Model */}
+            <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
+                <CardContent className="px-6">
+                    <div className="grid gap-3">
+                        <h3 className="text-base font-semibold text-(--lecturer-text)">
+                            Model
+                        </h3>
+                        <div className="grid gap-3 md:grid-cols-2">
+                            <Field
+                                current={llm?.active_provider}
+                                hint="Penyedia layanan AI yang digunakan untuk menjawab pertanyaan."
+                                label="Provider"
                             >
-                                <SelectTrigger className="w-full">
-                                    <SelectValue placeholder="Pilih provider" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    {Object.keys(providers).map((p) => (
-                                        <SelectItem key={p} value={p}>
-                                            {p.charAt(0).toUpperCase() + p.slice(1)}
-                                        </SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </Select>
-                        </Field>
-
-                        <Field
-                            current={llm?.active_model}
-                            hint="Model AI yang digunakan. Pilih provider terlebih dahulu."
-                            label="Model"
-                        >
-                            <SearchableSelect
-                                disabled={!formData.active_provider}
-                                options={providerConfig?.model_options ?? []}
-                                placeholder={
-                                    formData.active_provider
-                                        ? 'Pilih model'
-                                        : 'Pilih provider dulu'
-                                }
-                                searchPlaceholder="Cari model..."
-                                value={formData.active_model}
-                                onChange={(v) => setField('active_model', v)}
-                            />
-                        </Field>
+                                <Select
+                                    value={formData.active_provider}
+                                    onValueChange={handleProviderChange}
+                                >
+                                    <SelectTrigger className="w-full">
+                                        <SelectValue placeholder="Pilih provider" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {Object.keys(providers).map((p) => (
+                                            <SelectItem key={p} value={p}>
+                                                {p.charAt(0).toUpperCase() +
+                                                    p.slice(1)}
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                            </Field>
 
-                        <div className="md:col-span-2">
                             <Field
-                                hint="URL endpoint API provider. Pilih dari daftar atau masukkan custom URL."
-                                label="Base URL"
+                                current={llm?.active_model}
+                                hint="Model AI yang digunakan. Pilih provider terlebih dahulu."
+                                label="Model"
                             >
-                                <CreatableBaseUrlSelect
-                                    key={formData.active_provider}
-                                    options={baseUrlOptions}
-                                    value={formData.base_url}
-                                    onChange={(v) => setField('base_url', v)}
+                                <SearchableSelect
+                                    disabled={!formData.active_provider}
+                                    options={
+                                        providerConfig?.model_options ?? []
+                                    }
+                                    placeholder={
+                                        formData.active_provider
+                                            ? 'Pilih model'
+                                            : 'Pilih provider dulu'
+                                    }
+                                    searchPlaceholder="Cari model..."
+                                    value={formData.active_model}
+                                    onChange={(v) =>
+                                        setField('active_model', v)
+                                    }
                                 />
                             </Field>
+
+                            <div className="md:col-span-2">
+                                <Field
+                                    hint="URL endpoint API provider. Pilih dari daftar atau masukkan custom URL."
+                                    label="Base URL"
+                                >
+                                    <CreatableBaseUrlSelect
+                                        key={formData.active_provider}
+                                        options={baseUrlOptions}
+                                        value={formData.base_url}
+                                        onChange={(v) =>
+                                            setField('base_url', v)
+                                        }
+                                    />
+                                </Field>
+                            </div>
                         </div>
+                    </div>
+                </CardContent>
+            </Card>
+
+            {/* Parameter */}
+            <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
+                <CardContent className="px-6">
+                    <div className="grid gap-3">
+                        <h3 className="text-base font-semibold text-(--lecturer-text)">
+                            Parameter
+                        </h3>
+                        <div className="grid gap-3 md:grid-cols-2">
+                            <Field
+                                hint="Tingkat kreativitas jawaban (0–1). Rendah = konsisten, tinggi = lebih variatif."
+                                label="Temperature"
+                            >
+                                <Input
+                                    min="0"
+                                    step="0.01"
+                                    type="number"
+                                    value={formData.temperature}
+                                    onChange={(event) =>
+                                        setField(
+                                            'temperature',
+                                            event.target.value,
+                                        )
+                                    }
+                                />
+                            </Field>
 
-                        <Field
-                            hint="Tingkat kreativitas jawaban (0–1). Rendah = konsisten, tinggi = lebih variatif."
-                            label="Temperature"
-                        >
-                            <Input
-                                min="0"
-                                step="0.01"
-                                type="number"
-                                value={formData.temperature}
-                                onChange={(event) =>
-                                    setField('temperature', event.target.value)
-                                }
-                            />
-                        </Field>
+                            <Field
+                                hint="Batas maksimum token yang dihasilkan per respons."
+                                label="Max Tokens"
+                            >
+                                <Input
+                                    min="1"
+                                    type="number"
+                                    value={formData.max_tokens}
+                                    onChange={(event) =>
+                                        setField(
+                                            'max_tokens',
+                                            event.target.value,
+                                        )
+                                    }
+                                />
+                            </Field>
 
-                        <Field
-                            hint="Batas maksimum token yang dihasilkan per respons."
-                            label="Max Tokens"
-                        >
-                            <Input
-                                min="1"
-                                type="number"
-                                value={formData.max_tokens}
-                                onChange={(event) =>
-                                    setField('max_tokens', event.target.value)
-                                }
-                            />
-                        </Field>
+                            <Field
+                                hint="Batas waktu menunggu respons dari API dalam detik."
+                                label="Request Timeout"
+                            >
+                                <Input
+                                    min="1"
+                                    type="number"
+                                    value={formData.request_timeout}
+                                    onChange={(event) =>
+                                        setField(
+                                            'request_timeout',
+                                            event.target.value,
+                                        )
+                                    }
+                                />
+                            </Field>
 
+                            <Field
+                                hint="Tingkat usaha reasoning model. Tersedia sesuai provider yang dipilih."
+                                label="Reasoning Effort"
+                            >
+                                <Select
+                                    disabled={!formData.active_provider}
+                                    value={
+                                        formData.reasoning_effort || '__none__'
+                                    }
+                                    onValueChange={(val) =>
+                                        setField(
+                                            'reasoning_effort',
+                                            val === '__none__' ? '' : val,
+                                        )
+                                    }
+                                >
+                                    <SelectTrigger className="w-full">
+                                        <SelectValue placeholder="Tidak diatur" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="__none__">
+                                            Tidak diatur
+                                        </SelectItem>
+                                        {reasoningEffortOptions.map(
+                                            (effort) => (
+                                                <SelectItem
+                                                    key={effort}
+                                                    value={effort}
+                                                >
+                                                    {effort}
+                                                </SelectItem>
+                                            ),
+                                        )}
+                                    </SelectContent>
+                                </Select>
+                            </Field>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+
+            {/* Autentikasi */}
+            <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
+                <CardContent className="px-6">
+                    <div className="grid gap-3">
+                        <h3 className="text-base font-semibold text-(--lecturer-text)">
+                            Autentikasi
+                        </h3>
                         <Field
-                            hint="Batas waktu menunggu respons dari API dalam detik."
-                            label="Request Timeout"
+                            hint="API key untuk autentikasi ke provider. Nilai disimpan terenkripsi."
+                            label="API Key"
                         >
-                            <Input
-                                min="1"
-                                type="number"
-                                value={formData.request_timeout}
-                                onChange={(event) =>
-                                    setField(
-                                        'request_timeout',
-                                        event.target.value,
-                                    )
-                                }
+                            <ApiKeyInput
+                                value={formData.api_key}
+                                onChange={(v) => setField('api_key', v)}
                             />
                         </Field>
-
+                    </div>
+                </CardContent>
+            </Card>
+
+            {/* System Prompt */}
+            <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
+                <CardContent className="px-6">
+                    <div className="grid gap-3">
+                        <h3 className="text-base font-semibold text-(--lecturer-text)">
+                            System Prompt
+                        </h3>
                         <Field
-                            hint="Tingkat usaha reasoning model. Tersedia sesuai provider yang dipilih."
-                            label="Reasoning Effort"
+                            hint="Pilih key system prompt yang ingin diedit. Setiap key menyimpan instruksi berbeda."
+                            label="Template"
                         >
                             <Select
-                                disabled={!formData.active_provider}
-                                value={formData.reasoning_effort || '__none__'}
-                                onValueChange={(val) =>
+                                disabled={systemPromptKeys.length === 0}
+                                value={selectedTemplate}
+                                onValueChange={(key) => {
+                                    setSelectedTemplate(key);
                                     setField(
-                                        'reasoning_effort',
-                                        val === '__none__' ? '' : val,
-                                    )
-                                }
+                                        'system_prompt',
+                                        systemPromptsMap[key] ?? '',
+                                    );
+                                }}
                             >
                                 <SelectTrigger className="w-full">
-                                    <SelectValue placeholder="Tidak diatur" />
+                                    <SelectValue placeholder="Pilih key..." />
                                 </SelectTrigger>
                                 <SelectContent>
-                                    <SelectItem value="__none__">
-                                        Tidak diatur
-                                    </SelectItem>
-                                    {reasoningEffortOptions.map((effort) => (
-                                        <SelectItem
-                                            key={effort}
-                                            value={effort}
-                                        >
-                                            {effort}
+                                    {systemPromptKeys.map((key) => (
+                                        <SelectItem key={key} value={key}>
+                                            {key}
                                         </SelectItem>
                                     ))}
                                 </SelectContent>
@@ -468,66 +570,34 @@ export function AdminLlmForm({ llm }: { llm?: LlmConfig | null }) {
                         </Field>
 
                         <Field
-                            hint="API key untuk autentikasi ke provider. Nilai disimpan terenkripsi."
-                            label="API Key"
+                            hint="Instruksi awal yang selalu dikirim ke model sebelum percakapan dimulai."
+                            label="Prompt"
                         >
-                            <ApiKeyInput
-                                value={formData.api_key}
-                                onChange={(v) => setField('api_key', v)}
+                            <textarea
+                                className="min-h-36 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
+                                value={formData.system_prompt}
+                                onChange={(event) => {
+                                    setField(
+                                        'system_prompt',
+                                        event.target.value,
+                                    );
+                                }}
                             />
                         </Field>
                     </div>
-
-                    <Field
-                        hint="Pilih key system prompt yang ingin diedit. Setiap key menyimpan instruksi berbeda."
-                        label="Template System Prompt"
-                    >
-                        <Select
-                            disabled={systemPromptKeys.length === 0}
-                            value={selectedTemplate}
-                            onValueChange={(key) => {
-                                setSelectedTemplate(key);
-                                setField('system_prompt', systemPromptsMap[key] ?? '');
-                            }}
-                        >
-                            <SelectTrigger className="w-full">
-                                <SelectValue placeholder="Pilih key..." />
-                            </SelectTrigger>
-                            <SelectContent>
-                                {systemPromptKeys.map((key) => (
-                                    <SelectItem key={key} value={key}>
-                                        {key}
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
-                    </Field>
-
-                    <Field
-                        hint="Instruksi awal yang selalu dikirim ke model sebelum percakapan dimulai."
-                        label="System Prompt"
-                    >
-                        <textarea
-                            className="border-input ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring min-h-36 w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
-                            value={formData.system_prompt}
-                            onChange={(event) => {
-                                setField('system_prompt', event.target.value);
-                            }}
-                        />
-                    </Field>
-
-                    <div className="flex justify-end">
-                        <Button disabled={isSubmitting} type="submit">
-                            {isSubmitting ? (
-                                <Spinner className="size-4" />
-                            ) : (
-                                <Save className="size-4" />
-                            )}
-                            Simpan LLM
-                        </Button>
-                    </div>
-                </form>
-            </CardContent>
-        </Card>
+                </CardContent>
+            </Card>
+
+            <div className="flex justify-end">
+                <Button disabled={isSubmitting} type="submit">
+                    {isSubmitting ? (
+                        <Spinner className="size-4" />
+                    ) : (
+                        <Save className="size-4" />
+                    )}
+                    Simpan LLM
+                </Button>
+            </div>
+        </form>
     );
 }