Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Working on cleaning this up and breaking it into smaller chunks.

Browse Source
This commit is contained in:
Scott Idem
2026-01-08 17:49:25 -05:00
parent 467a49e86b
commit 28a4e9457e
2 changed files with 130 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/routes/journals/JournalEntry_AITools.svelte
View File

@@ -1,23 +1,30 @@
<script lang="ts">
/**
* JournalEntry_AITools.svelte
* Extracted 2026-01-08 to modularize the massive Journal Entry God Component.
* Manages OpenAI summarization and display.
* Extracted 2026-01-08 to modularize the Journal Entry view.
* Encapsulates OpenAI logic and the Summary Modal.
*/
import OpenAI from 'openai';
import { BotMessageSquare, Loader, FileText } from '@lucide/svelte';
import { Modal } from 'flowbite-svelte';
import {
Bot, BotMessageSquare, Loader, FileText,
Save, FilePenLine
} from '@lucide/svelte';
import {
journals_loc,
journals_sess
} from '$lib/ae_journals/ae_journals_stores';
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
import type { ae_JournalEntry } from '$lib/types/ae_types';
import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
interface Props {
entry: ae_JournalEntry;
onSave: () => void;
log_lvl?: number;
}
let { entry, log_lvl = 0 }: Props = $props();
let { entry, onSave, log_lvl = 0 }: Props = $props();
let ae_promises: any = $state(null);
async function generate_summary() {
@@ -36,59 +43,87 @@
{
role: 'system',
content: $journals_loc?.entry?.llm__system_prompt ||
'You are a helpful assistant that helps people find information.'
'You are a helpful assistant.'
},
{ role: 'user', content: entry.content }
]
}).then((resp__chat) => {
if (log_lvl) console.log('AI API Response:', resp__chat);
$journals_sess.entry.ai_summary =
resp__chat?.choices?.[0]?.message?.content || 'No summary available';
}).then((resp) => {
$journals_sess.entry.ai_summary = resp?.choices?.[0]?.message?.content || 'No summary available';
$journals_sess.entry.show__ai_summary = true;
});
} catch (err: any) {
console.error('Error from chat completion:', err);
alert('Error from chat completion: ' + (err?.message || err));
console.error('AI Error:', err);
alert('AI Error: ' + err.message);
}
}
function use_saved_summary() {
$journals_sess.entry.ai_summary = entry.summary;
$journals_sess.entry.show__ai_summary = true;
}
</script>
<div class="journal-ai-tools relative">
{#if !$journals_sess?.entry?.show__ai_summary}
{#if entry.content && entry.content.length > 50}
<button
type="button"
onclick={generate_summary}
class="btn btn-sm variant-filled-primary absolute top-2 right-2 z-10 shadow-lg"
title="Generate AI summary"
>
{#await ae_promises}
<Loader class="inline-block mr-1 animate-spin" />
<span class="text-sm">Summarizing...</span>
{:then}
<BotMessageSquare class="inline-block mr-1" />
<span class="text-sm">Summarize</span>
{:catch}
<span class="text-sm text-red-500">Error</span>
{/await}
</button>
{:else if entry.summary}
<button
type="button"
onclick={use_saved_summary}
class="btn btn-sm variant-filled-primary absolute top-2 right-2 z-10 shadow-lg"
title="Show saved summary"
>
<FileText class="inline-block mr-1" />
Use Saved Summary
</button>
{/if}
<!-- Summary Trigger Button -->
{#if !$journals_sess?.entry?.show__ai_summary}
{#if entry.content && entry.content.length > 50}
<button
type="button"
onclick={generate_summary}
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500 absolute top-2 right-2 z-10"
>
{#await ae_promises}
<Loader class="inline-block mr-1 animate-spin" />
<span class="text-sm">Summarizing...</span>
{:then}
<BotMessageSquare class="inline-block mr-1" />
<span class="text-sm">Summarize</span>
{:catch}
<span class="text-sm text-red-500">Error</span>
{/await}
</button>
{:else if entry.summary}
<button
type="button"
onclick={() => {
$journals_sess.entry.ai_summary = entry.summary;
$journals_sess.entry.show__ai_summary = true;
}}
class="btn btn-sm preset-tonal-primary absolute top-2 right-2 z-10"
>
<FileText size="1.25em" class="mr-1" /> Use Saved
</button>
{/if}
</div>
{/if}
<!-- AI Summary Modal -->
{#if $journals_sess?.entry?.show__ai_summary && $journals_sess?.entry?.ai_summary}
<Modal
title="AI Summary"
bind:open={$journals_sess.entry.show__ai_summary}
size="md"
class="bg-white dark:bg-gray-800"
>
<div class="space-y-4">
<div class="flex gap-2 justify-center">
<button
class="btn btn-sm variant-filled-success"
onclick={() => {
entry.summary = $journals_sess.entry.ai_summary;
onSave();
}}
>
<Save size="1.2em" class="mr-1" /> Save to Entry
</button>
<button
class="btn btn-sm variant-filled-primary"
onclick={generate_summary}
>
<BotMessageSquare size="1.2em" class="mr-1" /> Re-Summarize
</button>
</div>
<E_app_codemirror_v5
editable={true}
content={$journals_sess.entry.ai_summary}
bind:new_content={$journals_sess.entry.ai_summary}
bind:theme_mode={$ae_loc.theme_mode}
class="p-2 border rounded-lg h-64"
/>
</div>
</Modal>
{/if}

116
src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
View File

@@ -92,7 +92,8 @@
import Comp_hosted_files_download_button from '$lib/ae_core/ae_comp__hosted_files_download_button.svelte';
// *** Configuration
let llm_api_token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVhYjI2MzdlLThiMjktNGM2Zi05MzVhLWFkYjU1MDkwMGU5MCJ9.4y5AStXZJAVnWRlgG3lVV0-xKIfMzqdNRuInGwT0ThQ';
let llm_api_token =
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVhYjI2MzdlLThiMjktNGM2Zi05MzVhLWFkYjU1MDkwMGU5MCJ9.4y5AStXZJAVnWRlgG3lVV0-xKIfMzqdNRuInGwT0ThQ';
let llm_api_base_url = 'https://ai.dgrzone.com/api';
let llm_api_model = $journals_loc?.llm__api_model;
@@ -123,7 +124,12 @@
// Idiomatic Svelte 5 change detection
let tmp_entry_obj_changed = $derived.by(() => {
if (!tmp_entry_obj || !orig_entry_obj || not_obj(tmp_entry_obj) || not_obj(orig_entry_obj)) {
if (
!tmp_entry_obj ||
!orig_entry_obj ||
not_obj(tmp_entry_obj) ||
not_obj(orig_entry_obj)
) {
return false;
}
@@ -366,26 +372,18 @@
let { left_over_string, cut_out_string } = handle_cut_string(
tmp_entry_obj?.content
);
// Need to decrypt the current content and current history. Assume the history has not been decrypted yet.
let content_enc_combined_data = await ae_util.encrypt_wrapper(
left_over_string,
decrypt_key
);
if (log_lvl) {
console.log('TEST: Encrypted string:', content_enc_combined_data);
}
// return content_enc_combined_data;
if (log_lvl) console.log('TEST: Encrypted string:', content_enc_combined_data);
// let content_enc_combined_data = await handle_encrypt_string(left_over_string, decrypt_key)
data_kv.content_encrypted = content_enc_combined_data;
data_kv.content = null;
tmp_entry_obj.content = null;
// decrypted_content = '';
if (log_lvl) {
console.log('TEST: Decrypting the history before saving it...');
}
if (tmp_entry_obj?.history_encrypted) {
decrypted_history = await ae_util.decrypt_wrapper(
tmp_entry_obj?.history_encrypted,
@@ -397,21 +395,15 @@
if (cut_out_string) {
let cut_prefix = `# Cut on ${ae_util.iso_datetime_formatter(new Date().toISOString(), 'datetime_iso_12_no_seconds')}\n`;
cut_out_string = cut_prefix + cut_out_string;
console.log(`TEST: Cut out string with prefix: "${cut_out_string}"`);
}
if (tmp_entry_obj?.history?.length && cut_out_string) {
console.log(`HERE 1`);
data_kv.history = tmp_entry_obj?.history + '\n' + cut_out_string + '\n';
} else {
console.log(`HERE 2`);
data_kv.history = cut_out_string + '\n';
}
console.log('TEST: data_kv.history:', data_kv.history);
if (log_lvl) {
console.log('TEST: Encrypting the history before saving it...');
}
if (log_lvl) console.log('TEST: Encrypting history...');
let history_enc_combined_data = await ae_util.encrypt_wrapper(
data_kv.history,
decrypt_key
@@ -419,14 +411,10 @@
data_kv.history_encrypted = history_enc_combined_data;
data_kv.history = null;
tmp_entry_obj.history;
decrypted_history = '';
}
}
// Call API to save the content
try {
const response = await journals_func.update_ae_obj__journal_entry({
@@ -435,7 +423,7 @@
data_kv: data_kv,
log_lvl: 1
});
console.log('Journal entry updated successfully:', response);
if (log_lvl) console.log('Journal entry updated successfully:', response);
updated_obj = true;
} catch (error) {
console.error('Error updating journal entry:', error);
@@ -449,11 +437,8 @@
return;
}
let data_kv = {
journal_id_random: tmp_entry_obj?.journal_id
};
let data_kv = { journal_id_random: tmp_entry_obj?.journal_id };
// Call API to save the content
try {
await journals_func.update_ae_obj__journal_entry({
api_cfg: $ae_api,
@@ -463,10 +448,10 @@
});
updated_obj = true;
updated_idb = false;
console.log('Journal entry updated successfully!');
if (log_lvl) console.log('Journal entry journal_id changed successfully!');
} catch (error) {
console.error('Error updating journal entry:', error);
alert('Failed to update journal entry.');
console.error('Error changing journal ID:', error);
alert('Failed to change journal ID.');
}
$journals_slct.journal_id = tmp_entry_obj?.journal_id;
goto(`/journals/${tmp_entry_obj?.journal_id}`);
@@ -561,12 +546,17 @@
p-2 md:p-3 rounded-lg shadow-md
"
>
<div class="flex-1 flex flex-row flex-wrap gap-2 items-center justify-start min-w-[200px]">
<div
class="flex-1 flex flex-row flex-wrap gap-2 items-center justify-start min-w-[200px]"
>
<!-- Toggle edit for journal entry -->
<button
type="button"
onclick={() => {
const isEditing = $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] === 'current';
const isEditing =
$journals_loc.entry.edit_kv[
$lq__journal_entry_obj?.journal_entry_id
] === 'current';
if (isEditing) {
if (tmp_entry_obj_changed) {
@@ -574,11 +564,14 @@
update_journal_entry();
} else {
// Action: CANCEL/BACK TO VIEW
$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = false;
$journals_loc.entry.edit_kv[
$lq__journal_entry_obj?.journal_entry_id
] = false;
}
} else {
// Action: ENTER EDIT MODE
$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = 'current';
$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] =
'current';
}
}}
class="
@@ -586,7 +579,9 @@
preset-tonal-surface hover:preset-filled-primary-500
transition-all
"
class:preset-filled-success-500={tmp_entry_obj_changed && $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] === 'current'}
class:preset-filled-success-500={tmp_entry_obj_changed &&
$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] ===
'current'}
title="Toggle view/edit/save mode"
>
{#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] === 'current'}
@@ -600,7 +595,9 @@
{/if}
</button>
<h2 class="journal_entry__name text-base md:text-lg font-bold truncate max-w-[200px] md:max-w-md">
<h2
class="journal_entry__name text-base md:text-lg font-bold truncate max-w-[200px] md:max-w-md"
>
{#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'}
<input
type="text"
@@ -1818,46 +1815,27 @@
<!-- Select option list of Journals to choose from. This is used to assign the Journal Entry to a different Journal ID. -->
{#if $ae_loc.edit_mode && $lq__journal_obj_li?.length}
<div
class="w-full flex flex-row flex-wrap gap-2 items-center justify-start border border-gray-200 rounded-lg"
class="w-full flex flex-row flex-wrap gap-2 items-center justify-start border border-gray-200 rounded-lg p-1"
>
<span class="w-full text-center">
<SquareLibrary size="1em" class="mx-1 inline-block" />
<span class="text-sm text-gray-500 hidden sm:inline">
<SquareLibrary size="1em" class="mx-1 inline-block text-primary-500" />
<span class="text-xs text-gray-500 hidden sm:inline uppercase font-bold tracking-wider">
Move to Journal:
</span>
</span>
<select
class="btn btn-secondary btn-sm
preset-tonal-primary
hover:preset-filled-primary-500
transition
text-xs
border-none
w-full
"
class="select select-sm w-full bg-surface-500/10 border-none text-xs"
bind:value={tmp_entry_obj.journal_id}
onchange={(event) => {
tmp_entry_obj.journal_id = (
event.target as HTMLInputElement
).value;
console.log('Selected journal:', tmp_entry_obj.journal_id);
if (
confirm(
`Are you sure you want to change the journal for this entry?`
)
) {
onchange={() => {
if (confirm(`Are you sure you want to change the journal for this entry?`)) {
change_journal_id();
}
}}
title="Select a different journal for this entry"
>
<option value="">Select Journal</option>
{#each $lq__journal_obj_li as journal}
<option
value={journal.journal_id}
title={`Journal: ${journal.name}`}
>
<option value={journal.journal_id}>
{journal.name}
</option>
{/each}
@@ -1869,8 +1847,6 @@
</div>
</header>
<section
class="
grow
@@ -2066,7 +2042,7 @@
{/if}
</article>
{/if}
{#if $lq__journal_entry_obj?.data_json?.hosted_file_kv}
{#if $lq__journal_entry_obj?.data_json?.hosted_file_kv}
<div class="flex flex-row flex-wrap gap-1 items-center justify-center w-full">
<span class="">
<!-- <SquareDownload size="1em" class="mx-1 inline-block"/> -->
@@ -2172,7 +2148,7 @@
<E_app_codemirror_v5
content={tmp_entry_obj?.content ?? ''}
bind:new_content={tmp_entry_obj.content}
bind:editorView={editorView}
bind:editorView
bind:theme_mode={$ae_loc.theme_mode}
placeholder="Write using Markdown here..."
class="
@@ -2318,7 +2294,9 @@
</section>
{/if}
{:else if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'history'}
<div class="grow basis-full flex flex-col items-center justify-center h-full w-full max-w-6xl">
<div
class="grow basis-full flex flex-col items-center justify-center h-full w-full max-w-6xl"
>
{#if $journals_sess?.show__content__journal_entry_history == 'view'}
<E_app_codemirror_v5
editable={false}
@@ -2342,7 +2320,6 @@
{/if}
</section>
<section class="ae_meta flex flex-row flex-wrap gap-1 items-center justify-between w-full">
<span class="flex flex-row items-center justify-center text-sm text-gray-500">
{#if !$ae_loc.edit_mode}
@@ -2515,7 +2492,6 @@
</label>
</div>
<E_app_codemirror_v5
editable={true}
readonly={false}