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

src/routes/journals/+page.svelte

@@ -31,6 +31,7 @@ interface Props {
 let { data }: Props = $props();
 
 
+import Modal_journals_cfg from './modal_journals_config.svelte';
 import Journal_obj_li from './ae_comp__journal_obj_li.svelte';
 
 // import Element_data_store from '$lib/element_data_store_v2.svelte';
@@ -203,7 +204,6 @@ async function create_journal() {
 
     <!-- Show Journals Config button -->
     <button
-        disabled={true}
         type="button"
         class="
             btn btn-sm
@@ -213,6 +213,7 @@ async function create_journal() {
             "
         onclick={
             () => {
+                $journals_sess.show__modal__journals_config = true;
                 // Redirect to the journals config page
                 // goto('/journals/config');
             }
@@ -326,5 +327,12 @@ async function create_journal() {
 {/if}
 
 
+{#if $journals_sess.show__modal__journals_config}
+<Modal_journals_cfg
+    show={$journals_sess.show__modal__journals_config}
+     />
+{/if}
+
+
 <style lang="postcss">
 </style>

src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte

@@ -36,7 +36,7 @@ let llm_api_token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVhYjI2MzdlLT
 // let llm_api_base_url = 'http://localhost:3000/api';
 let llm_api_base_url = 'https://ai.dgrzone.com/api';
 // api_model = 'DgrZone DeepSeek (8b quick)';
-let llm_api_model = 'dgrzone-deepseek-8b-quick';
+let llm_api_model = $journals_loc?.llm__api_model; // 'dgrzone-deepseek-8b-quick';
 
 
 // const configuration = new Configuration({
@@ -1700,26 +1700,26 @@ $effect(() => {
                 <button
                     type="button"
                     onclick={async () => {
-                            const ai_client = new OpenAI({
-                            apiKey: llm_api_token,
-                            baseURL: llm_api_base_url,
-                            dangerouslyAllowBrowser: true,
+                        const ai_client = new OpenAI({
+                            apiKey: $journals_loc?.llm__api_token,
+                            baseURL: $journals_loc?.llm__api_base_url,
+                            dangerouslyAllowBrowser: $journals_loc?.llm__api_dangerous_browser,
 
                         });
 
                         // let resp__models = ai_client.models.list();
                         // console.log('AI API Response (models)', resp__models);
 
-                        let msg_role_system_content = $journals_loc?.entry?.ai__system_prompt || 'You are a helpful assistant that helps people find information.';
+                        // let msg_role_system_content = $journals_loc?.entry?.llm__system_prompt || 'You are a helpful assistant that helps people find information.';
                         // let msg_role_user_content = 'Why is the sky blue?';
                         let msg_role_user_content = tmp_entry_obj?.content;
 
                         try {
                             ae_promises = ai_client.chat.completions.create(
                                 {
-                                    model: llm_api_model,
+                                    model: $journals_loc?.llm__api_model,
                                     messages: [
-                                        { role: 'system', content: msg_role_system_content },
+                                        { role: 'system', content: $journals_loc?.entry?.llm__system_prompt || 'You are a helpful assistant that helps people find information.' },
                                         { role: "user", content: msg_role_user_content }
                                     ],
                                     // max_tokens: 512,
@@ -2108,26 +2108,26 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
         <button
             type="button"
             onclick={() => {
-                    const ai_client = new OpenAI({
-                    apiKey: llm_api_token,
-                    baseURL: llm_api_base_url,
-                    dangerouslyAllowBrowser: true,
+                const ai_client = new OpenAI({
+                    apiKey: $journals_loc?.llm__api_token,
+                    baseURL: $journals_loc?.llm__api_base_url,
+                    dangerouslyAllowBrowser: $journals_loc?.llm__api_dangerous_browser,
 
                 });
 
                 // let resp__models = ai_client.models.list();
                 // console.log('AI API Response (models)', resp__models);
 
-                let msg_role_system_content = $journals_loc?.entry?.ai__system_prompt || 'You are a helpful assistant that helps people find information.';
+                // let msg_role_system_content = $journals_loc?.entry?.llm__system_prompt || 'You are a helpful assistant that helps people find information.';
                 // let msg_role_user_content = 'Why is the sky blue?';
                 let msg_role_user_content = tmp_entry_obj?.content;
 
                 try {
                     ae_promises = ai_client.chat.completions.create(
                         {
-                            model: llm_api_model,
+                            model: $journals_loc?.llm__api_model,
                             messages: [
-                                { role: 'system', content: msg_role_system_content },
+                                { role: 'system', content: $journals_loc?.entry?.llm__system_prompt || 'You are a helpful assistant that helps people find information.' },
                                 { role: "user", content: msg_role_user_content }
                             ],
                             // max_tokens: 512,

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>