400 lines
13 KiB
Svelte
400 lines
13 KiB
Svelte
<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,
|
|
RefreshCcw, RemoveFormatting,
|
|
SquareLibrary,
|
|
Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
|
|
Tags, Target, ToggleLeft, ToggleRight, Trash2, TypeOutline,
|
|
X
|
|
} from '@lucide/svelte';
|
|
import { Modal } from 'flowbite-svelte';
|
|
|
|
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
|
|
import { journals_loc, journals_sess, journals_slct, journals_prom, journals_trig } from '$lib/ae_journals/ae_journals_stores';
|
|
import E_app_codemirror_v5 from '$lib/e_app_codemirror_v5.svelte';
|
|
|
|
</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>
|
|
Æ 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>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm preset-outlined-primary-400-600"
|
|
onclick={() => {
|
|
$journals_loc.llm__api_base_url = $ae_loc.site_cfg_json?.llm__api_base_url ?? 'https://ai.dgrzone.com/api';
|
|
$journals_loc.llm__api_model = $ae_loc.site_cfg_json?.llm__api_model ?? 'dgrzone-deepseek-8b-quick';
|
|
$journals_loc.llm__api_token = $ae_loc.site_cfg_json?.llm__api_token ?? '';
|
|
$journals_loc.llm__api_dangerous_browser = $ae_loc.site_cfg_json?.llm__api_dangerous_browser ?? false;
|
|
$journals_loc.entry.llm__system_prompt = $ae_loc.site_cfg_json?.llm__system_prompt ?? '';
|
|
|
|
|
|
}}
|
|
>
|
|
<Copy class="inline-block mr-1" />
|
|
LLM from Site Cfg
|
|
</button>
|
|
|
|
<!-- 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 for Journal Entry summarization:
|
|
<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>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm preset-outlined-primary-400-600"
|
|
onclick={() => {
|
|
let default_system_prompt = 'Summarize the following journal entry content in a concise manner, focusing on key points and insights.';
|
|
$journals_loc.entry.llm__system_prompt = default_system_prompt;
|
|
}}
|
|
>
|
|
<RefreshCcw class="inline-block mr-1" />
|
|
Reset to Journal Entry System Prompt
|
|
</button>
|
|
|
|
</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> |