General clean up. Make things configurable. More AI stuff.

src/routes/journals/modal_journals_config.svelte

@@ -0,0 +1,370 @@
+<script lang="ts">
+interface Props {
+    log_lvl?: number;
+    show?: boolean;
+    tab?: string;
+}
+
+let {
+    log_lvl = $bindable(0),
+    show = $bindable(true),
+    tab = $bindable('form'), // form, local_json, session_json
+}: Props = $props();
+
+import {
+        ArrowDown01, ArrowDown10, ArrowDownUp,
+        BetweenVerticalEnd, BetweenVerticalStart,
+        BookHeart, BookImage, Bookmark, BookOpenText, BriefcaseBusiness,
+        Check, Copy,
+        Expand, Eye, EyeOff,
+        Flag, FlagOff, FilePlus, Fingerprint,
+        Globe,
+        Library,
+        MessageSquareWarning, Minus,
+        Notebook,
+        Pencil, Plus,
+        RemoveFormatting,
+        SquareLibrary,
+        Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
+        Tags, Target, ToggleLeft, ToggleRight, Trash2, TypeOutline,
+        X
+    } from '@lucide/svelte';
+import { Modal } from 'flowbite-svelte';
+
+import E_app_codemirror_v5 from '$lib/e_app_codemirror_v5.svelte';
+import { journals_loc, journals_sess, journals_slct, journals_prom, journals_trig } from '$lib/ae_journals/ae_journals_stores';
+
+</script>
+
+
+<Modal
+    bind:open={show}
+    autoclose={false}
+    placement="top-center"
+    size="xl"
+    class="
+        top-center
+        relative
+        flex flex-col
+        mx-auto w-full
+        bg-white dark:bg-gray-800
+        text-gray-800 dark:text-gray-200
+        border border-orange-300 dark:border-orange-700 rounded-lg
+        shadow-xl
+        "
+    headerClass="
+        flex flex-row gap-2 items-center justify-between
+        w-full
+        bg-orange-100 dark:bg-orange-900
+        "
+    footerClass="
+        flex flex-row gap-2 items-center justify-center
+        w-full
+        bg-orange-100 dark:bg-orange-900
+        "
+    >
+
+{#snippet header()}
+    <h3>
+        <span class="text-base font-semibold">
+            <span class="text-primary-500">
+                <BookOpenText class="inline-block mr-1" />
+            </span>
+            &AElig; Journals Settings:
+        </span>
+        {$journals_loc?.name ?? '-- not set --'}
+    </h3>
+{/snippet}
+
+
+<div class="modal h-full md:pb-24">
+    <div class="modal-box space-y-2">
+
+<!-- Menu to toggle between viewing JSON and the form view -->
+<div
+    class="flex flex-row gap-1 items-center justify-center"
+    >
+    <button
+        type="button"
+        class:preset-outlined-surface-200-800={tab === 'form'}
+        class="
+            btn btn-sm
+            preset-outlined-surface-50-950
+            transition-all
+            "
+        onclick={() =>
+            tab = 'form'
+            }
+        >
+        <span class="fas fa-cog mr-1"></span>
+        Config
+    </button>
+    <button
+        type="button"
+        class:preset-outlined-surface-200-800={tab === 'local_json'}
+        class="
+            btn btn-sm
+            preset-outlined-surface-50-950
+            transition-all
+            "
+        onclick={() =>
+            tab = 'local_json'
+            }
+        >
+        <span class="fas fa-code mr-1"></span>
+        Local JSON
+    </button>
+    <button
+        type="button"
+        class:preset-outlined-surface-200-800={tab === 'session_json'}
+        class="
+            btn btn-sm
+            preset-outlined-surface-50-950
+            transition-all
+            "
+        onclick={() =>
+            tab = 'session_json'
+            }        >
+        <span class="fas fa-code mr-1"></span>
+        Session JSON
+    </button>
+
+</div>
+
+<!-- Section for the configuration form -->
+<div
+    class:hidden={tab !== 'form'}
+    class="flex flex-col gap-1 items-start justify-start"
+    >
+
+    <!-- <h2 class="font-semibold"></h2> -->
+
+    <div class="w-full space-y-2 p-2 border-t border-surface-100-900">
+        <h2 class="font-semibold">$journals_loc:</h2>
+        <h3 class="font-semibold">Date and Time:</h3>
+
+        <!-- datetime_format - default 'datetime_12_long'; select options -->
+        <label class="flex items-center justify-start gap-1">
+            DateTime Format:
+            <select
+                bind:value={$journals_loc.datetime_format}
+                class="select select-sm select-bordered w-full max-w-xs p-1"
+                >
+                <option value="datetime_12_short">MMM D, YY hh:mm A</option>
+                <option value="datetime_12_long">MMMM D, YYYY hh:mm A</option>
+                <option value="datetime_short">MMM D, YY HH:mm</option>
+                <option value="datetime_long">MMMM D, YYYY HH:mm</option>
+                <option value="datetime_us">US (MM/DD/YYYY hh:mm:ss A)</option>
+                <option value="datetime_iso">ISO (YYYY-MM-DD HH:mm:ss)</option>
+            </select>
+        </label>
+
+        <!-- time_format - default 'time_12_short'; select options -->
+        <label class="flex items-center justify-start gap-1">
+            Time Format:
+            <select
+                bind:value={$journals_loc.time_format}
+                class="select select-sm select-bordered w-full max-w-xs p-1"
+                >
+                <option value="time_12_short">12-hour short (e.g., 3:30 PM)</option>
+                <option value="time_12_long">12-hour long (e.g., 3:30:45 PM)</option>
+                <option value="time_short">24-hour short (e.g., 15:30)</option>
+                <option value="time_long">24-hour long (e.g., 15:30:45)</option>
+            </select>
+        </label>
+
+        <!-- time_hours 12 or 24; toggle -->
+        <div class="flex flex-row gap-2 items-center justify-start">
+        <label class="flex flex-row gap-1 items-center justify-start">
+            12
+            <input
+                type="checkbox"
+                checked={$journals_loc.time_hours == 12}
+                value={12}
+                onchange={() => {
+                    $journals_loc.time_hours = 12;
+                }}
+                class="checkbox checkbox-sm"
+                />
+
+        </label>
+        <label class="flex flex-row gap-1 items-center justify-start">
+            24
+            <input
+                type="checkbox"
+                checked={$journals_loc.time_hours == 24}
+                value={24}
+                onchange={() => {
+                    $journals_loc.time_hours = 24;
+                }}
+                class="checkbox checkbox-sm"
+                />
+
+        </label>
+        <span class="text-sm">
+            Time Format: <span class="font-semibold">{$journals_loc.time_hours}-hour</span>
+        </span>
+        </div>
+
+        <h3 class="font-semibold">LLM AI:</h3>
+
+        <!-- llm__api_base_url - default 'https://ai.dgrzone.com/api'; input url -->
+        <label class="flex items-center justify-start gap-1">
+            LLM API Base URL:
+        <input
+            type="text"
+            bind:value={$journals_loc.llm__api_base_url}
+            placeholder="LLM API Base URL"
+            class="input input-sm input-bordered w-full max-w-xs"
+            />
+        </label>
+
+        <!-- llm__api_model - default 'dgrzone-deepseek-8b-quick'; input text -->
+        <label class="flex items-center justify-start gap-1">
+            LLM API Model:
+        <input
+            type="text"
+            bind:value={$journals_loc.llm__api_model}
+            placeholder="LLM API Model"
+            class="input input-sm input-bordered w-full max-w-xs"
+            />
+        </label>
+
+        <!-- llm__api_token; input text -->
+        <label class="flex items-center justify-start gap-1">
+            LLM API Token:
+        <input
+            type="text"
+            bind:value={$journals_loc.llm__api_token}
+            placeholder="LLM API Token"
+            class="input input-sm input-bordered w-full max-w-4xl"
+            />
+        </label>
+
+        <!-- llm__api_dangerous_browser - default false; checkbox -->
+        <label class="flex flex-row gap-1 items-center justify-start">
+            <input
+                type="checkbox"
+                bind:checked={$journals_loc.llm__api_dangerous_browser}
+                class="checkbox checkbox-sm"
+                />
+            <span class="text-sm">
+                LLM API Dangerous Browser
+            </span>
+        </label>
+    </div>
+
+    <div class="w-full space-y-2 p-2 border-t border-surface-100-900">
+        <h2 class="font-semibold">$journals_loc?.entry:</h2>
+
+        <!-- entry > ai__system_prompt - textarea -->
+        <!-- <div class="h-16"> -->
+
+        <!-- </div> -->
+
+        <!-- entry > llm__max_tokens - number -->
+        <label class="flex items-center justify-start gap-1">
+            LLM Max Tokens:
+            <input
+                type="number"
+                bind:value={$journals_loc.entry.llm__max_tokens}
+                placeholder="LLM Max Tokens"
+                class="input input-sm input-bordered w-full max-w-xs"
+                />
+        </label>
+
+        <!-- entry > llm__temperature - number -->
+        <label class="flex items-center justify-start gap-1">
+            LLM Temperature:
+            <input
+                type="number"
+                step="0.01"
+                min="0"
+                max="1"
+                bind:value={$journals_loc.entry.llm__temperature}
+                placeholder="LLM Temperature"
+                class="input input-sm input-bordered w-full max-w-xs"
+                />
+        </label>
+
+        <label class="flex flex-col items-start justify-start gap-1 h-24">
+            LLM System Prompt:
+            <E_app_codemirror_v5
+                editable={true}
+                readonly={false}
+                content={$journals_loc?.entry?.llm__system_prompt}
+                bind:new_content={$journals_loc.entry.llm__system_prompt}
+                show_line_numbers={false}
+                placeholder="LLM System Prompt"
+                class="
+                    p-1
+                    preset-outlined-success-400-600
+                    shadow-lg rounded-lg
+                    "
+                on:change={(e) => {
+                    $journals_loc.entry.llm__system_prompt = e.detail;
+                }}
+                />
+        </label>
+
+    </div>
+</div>
+
+<!-- Section for viewing (and direct editing???) the raw localStorage JSON configuration -->
+<div
+    class:hidden={tab !== 'local_json'}
+    class=""
+    >
+    <E_app_codemirror_v5
+        editable={false}
+        readonly={true}
+        content={JSON.stringify($journals_loc, null, 2)}
+        show_line_numbers={false}
+        placeholder=""
+        class="
+            p-1
+            preset-outlined-surface-100-900
+            rounded-lg
+            "
+        />
+    <!-- <pre class="text-wrap">
+    {JSON.stringify($journals_loc, null, 2)}
+    </pre> -->
+</div>
+
+<!-- Section for viewing (and direct editing???) the raw sessionStorage JSON configuration -->
+<div
+    class:hidden={tab !== 'session_json'}
+    class=""
+    >
+    <E_app_codemirror_v5
+        editable={false}
+        readonly={true}
+        content={JSON.stringify($journals_sess, null, 2)}
+        show_line_numbers={false}
+        placeholder=""
+        class="
+            p-1
+            preset-outlined-surface-100-900
+            rounded-lg
+            "
+        />
+    <!-- <pre class="text-wrap">
+    {JSON.stringify($journals_sess, null, 2)}
+    </pre> -->
+</div>
+
+    </div>
+</div>
+
+{#snippet footer()}
+    <button
+        class="btn btn-sm btn-outline btn-primary"
+        onclick={() => show = false}
+        >
+        <X class="inline-block mr-1" />
+        Close
+    </button>
+{/snippet}
+
+</Modal>