From 58cfaaac676b02febfa723e2100ae136a461beb9 Mon Sep 17 00:00:00 2001 From: Jack Italiano Date: Thu, 15 Feb 2024 16:59:23 -0500 Subject: [PATCH 01/16] refactor new/delete/update thread/threads - changed method of checking for empty chats - added length attribute to stored thread/threads - removed check for empty chat on delete --- src/App.svelte | 105 ++++++++++++++++---------------------- src/utils/storageUtils.js | 3 +- src/utils/threadUtils.js | 45 ++++++++++++---- 3 files changed, 80 insertions(+), 73 deletions(-) diff --git a/src/App.svelte b/src/App.svelte index 010f684..5ae4477 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -8,7 +8,7 @@ import { BIDARA_CONFIG } from './assistant/bidara'; import { funcCalling } from './assistant/bidaraFunctions'; import { setOpenAIKey, setAsst, getKeyAsstAndThread, getBidaraAssistant } from './utils/openaiUtils'; - import { setThread, getThread, deleteThreadFromThreads, getNewThread, getThreads, setThreads, setActiveThreadName } from './utils/threadUtils'; + import { setThread, getThread, deleteThreadFromThreads, getNewThread, getThreads, setThreads, setActiveThreadName, updateThreadAndThreads, getEmptyThreads, floatThreadInThreads } from './utils/threadUtils'; import { getStoredActiveThread } from './utils/storageUtils'; import hljs from "highlight.js"; window.hljs = hljs; @@ -30,10 +30,8 @@ let deepChatWidth = "100dvw" let open = false; - let threads = getThreads(); - let selectedThreadId; - let selectedThreadName = ""; - let emptyChat; + let threads; + let activeThread; function onError(error) { console.log(error); @@ -49,15 +47,10 @@ if (keyAsstAndThread && keyAsstAndThread[0]) { threads = getThreads(); - selectedThreadName = keyAsstAndThread[2]?.name ? keyAsstAndThread[2].name : ""; - selectedThreadId = keyAsstAndThread[2]?.id ? keyAsstAndThread[2].id : ""; + activeThread = keyAsstAndThread[2]; - if (selectedThreadId) { - setThread({name: selectedThreadName, id: selectedThreadId}); - } - - if (threads.length <= 0 && selectedThreadName) { - threads = [keyAsstAndThread[2]]; + if (!threads || (threads.length <= 0 && activeThread)) { + threads = [activeThread]; setThreads(threads); } } @@ -74,15 +67,9 @@ openAIAsstIdSet = true; } - if (!openAIThreadIdSet && message.message._sessionId && message.message._sessionId != await getThread()) { - const newThread = {name: "New Chat", id: message.message._sessionId} - setThread(newThread); - openAIThreadIdSet = true; - } - - if (message.message.role === 'user' && emptyChat && emptyChat.id === selectedThreadId) { - emptyChat = null; - } + activeThread.length = deepChatRef.getMessages().length; + console.log("here"); + updateThreads(); } async function onComponentRender() { @@ -120,72 +107,69 @@ } async function newThreadAndSwitch() { - if (emptyChat) { - switchActiveThread(emptyChat); + // If the thread is already "new", stay on it + if (activeThread.length <= 0) { + if (activeThread.name != "New Chat") { + await renameActiveThread("New Chat"); + } return true; - } + } - const currrent_messages = deepChatRef.getMessages(); + // If an empty thead is already created, prevents creating a new one + const emptyThreads = getEmptyThreads(); + if (emptyThreads && emptyThreads.length >= 1) { - if (currrent_messages.length <= initialMessages.length) { - return; - } + const emptyThread = emptyThreads[0]; + switchActiveThread(emptyThread); - const newThread = await getNewThread(); + return true; + } - // force new object so Siderbar rerenders - threads = [ newThread ].concat(threads); - switchActiveThread(newThread); - emptyChat = newThread; + activeThread = await getNewThread(); + threads.unshift(activeThread); setThreads(threads); + + switchActiveThread(activeThread); + return true; } async function deleteThreadAndSwitch(thread) { - const currrent_messages = deepChatRef.getMessages(); - - if (threads.length <= 1 && currrent_messages.length <= initialMessages.length) { - return false; - } - - if (emptyChat && emptyChat.id === thread.id) { - emptyChat = null; - } - threads = deleteThreadFromThreads(thread.id); if (threads && threads.length > 0) { - const current_thread = getStoredActiveThread(); - const candidateThread = threads[0]; - - if (candidateThread && candidateThread !== current_thread) { - switchActiveThread(candidateThread); - } - + switchActiveThread(threads[0]); } else { newThreadAndSwitch(); } return true; } + async function switchActiveThread(thread) { await setThread(thread); keyAsstAndThread = await getKeyAsstAndThread(); - selectedThreadId = keyAsstAndThread[2].id; - selectedThreadName = thread.name; + activeThread = keyAsstAndThread[2]; return true; } async function renameActiveThread(name) { - threads = await setActiveThreadName(name); + await setActiveThreadName(name); + + threads = getThreads(); + activeThread = await getThread(); return true; } + function updateThreads() { + updateThreadAndThreads(activeThread, threads); + } +
@@ -235,21 +219,20 @@
  • After you send your first message to BIDARA, it will also be available to interact with through the OpenAI Assistants Playground. This interface is more complex, but also provides more customizability. Just select BIDARA, then click the 'Test' button.
    • -
    + {#if keyAsstAndThread !== null} {#key deepChatWidth}
    - +
    - {#key selectedThreadId} - + {#key activeThread} + {/key}
    - {#if keyAsstAndThread !== null} {#key keyAsstAndThread} {/key} - {/if}
    {/key} -
    - + {/if}
    diff --git a/src/utils/storageUtils.js b/src/utils/storageUtils.js index 2006d70..2110b06 100644 --- a/src/utils/storageUtils.js +++ b/src/utils/storageUtils.js @@ -35,11 +35,10 @@ export function setStoredThreads(value) { return setStorageJSON(OPENAI_THREADS_KEY, value); } -export function filterStoredThreads(thread_filter) { +export function getFilteredThreads(thread_filter) { const threads = getStoredThreads(); const updated_threads = threads.filter(thread_filter); - setStoredThreads(updated_threads); return updated_threads; } diff --git a/src/utils/threadUtils.js b/src/utils/threadUtils.js index b0189fe..0dbd5aa 100644 --- a/src/utils/threadUtils.js +++ b/src/utils/threadUtils.js @@ -1,18 +1,19 @@ import { validThread, getNewThreadId } from "./openaiUtils"; -import { getStoredActiveThread, getStoredThreads, setStoredActiveThread, setStoredThreads, filterStoredThreads } from "./storageUtils"; +import { getStoredActiveThread, getStoredThreads, setStoredActiveThread, setStoredThreads, getFilteredThreads } from "./storageUtils"; export async function getNewThread() { const new_id = await getNewThreadId(); if (new_id) { const new_name = "New Chat"; - return {name: new_name, id: new_id}; + return {name: new_name, id: new_id, length:0}; } return null; } export async function getThread() { + console.log("getttingthread"); const thread = getStoredActiveThread(); let isValidThreadId = false; @@ -46,11 +47,6 @@ export async function setThread(thread) { export function getThreads() { var threads = getStoredThreads(); - if (threads === null) { - threads = [] - setThreads(threads); - } - return threads; } @@ -59,7 +55,7 @@ export function setThreads(threads) { } export function deleteThreadFromThreads(thread_id) { - return filterStoredThreads((thread) => thread.id !== thread_id); + return getFilteredThreads((thread) => thread.id !== thread_id); } export async function setActiveThreadName(name) { @@ -79,6 +75,37 @@ export async function setActiveThreadName(name) { setThread(active_thread); setThreads(new_threads); +} + +export function getEmptyThreads() { + return getFilteredThreads((thread) => thread.length === 0); +} + +export function floatThreadInThreads(floatThread) { + const filteredWithoutThread = getFilteredThreads((thread) => thread.id !== floatThread); + filteredWithoutThread.unshift(floatThread); + return filteredWithoutThread; +} + +export function updateThreadAndThreads(activeThread, threads) { + const storedThread = getStoredActiveThread(); + const storedThreads = getStoredThreads(); - return new_threads; + + if (activeThread != storedThread) { + threads = threads.map((thread) => { + if (thread.id === activeThread.id) { + return activeThread; + } + return thread; + }); + + + setStoredActiveThread(activeThread); + } + + + if (threads != storedThreads) { + setStoredThreads(threads); + } } From 44eed3c7fcf00dde7440877ca235e101d4bb16f4 Mon Sep 17 00:00:00 2001 From: Jack Italiano Date: Fri, 16 Feb 2024 11:42:00 -0500 Subject: [PATCH 02/16] trash update: button on desktop, slider on mobile --- src/App.svelte | 9 +-- src/components/ButtonRevealButton.svelte | 98 ++++++++++++++++++++++++ src/components/Chat.svelte | 83 +++++++++++++++----- src/components/Sidebar.svelte | 4 + src/components/SlideButtonReveal.svelte | 16 ++-- src/utils/threadUtils.js | 5 +- 6 files changed, 185 insertions(+), 30 deletions(-) create mode 100644 src/components/ButtonRevealButton.svelte diff --git a/src/App.svelte b/src/App.svelte index 5ae4477..c7ddad0 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -21,7 +21,6 @@ let openAIKeySet = false; let openAIAsstIdSet = false; - let openAIThreadIdSet = false; let keyAsstAndThread = null; let welcomeRef; let navbarRef; @@ -68,7 +67,6 @@ } activeThread.length = deepChatRef.getMessages().length; - console.log("here"); updateThreads(); } @@ -108,7 +106,7 @@ async function newThreadAndSwitch() { // If the thread is already "new", stay on it - if (activeThread.length <= 0) { + if (activeThread && activeThread.length <= 0) { if (activeThread.name != "New Chat") { await renameActiveThread("New Chat"); } @@ -130,7 +128,7 @@ setThreads(threads); - switchActiveThread(activeThread); + await switchActiveThread(activeThread); return true; } @@ -138,10 +136,11 @@ async function deleteThreadAndSwitch(thread) { threads = deleteThreadFromThreads(thread.id); + activeThread = {}; if (threads && threads.length > 0) { switchActiveThread(threads[0]); } else { - newThreadAndSwitch(); + await newThreadAndSwitch(); } return true; diff --git a/src/components/ButtonRevealButton.svelte b/src/components/ButtonRevealButton.svelte new file mode 100644 index 0000000..aa26b6d --- /dev/null +++ b/src/components/ButtonRevealButton.svelte @@ -0,0 +1,98 @@ + +
    +
    + +

    {buttonText}

    + + revealed unfocused select + revealed focused select + +
    +
    + + diff --git a/src/components/Chat.svelte b/src/components/Chat.svelte index d4553f9..fff1921 100644 --- a/src/components/Chat.svelte +++ b/src/components/Chat.svelte @@ -1,5 +1,7 @@ -
    - +
    +
    + +
    +
    + +
    diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte index a4a09de..741b3b6 100644 --- a/src/components/Sidebar.svelte +++ b/src/components/Sidebar.svelte @@ -54,6 +54,10 @@ left: 0; } + nav { + border-top: 1px solid rgb(199, 199, 204); + } + .new-thread { line-height: 1em; background-color: white; diff --git a/src/components/SlideButtonReveal.svelte b/src/components/SlideButtonReveal.svelte index 4ee1772..c070f48 100644 --- a/src/components/SlideButtonReveal.svelte +++ b/src/components/SlideButtonReveal.svelte @@ -128,7 +128,9 @@ style="background-color: {slideBgColor};" >

    {sliderText}

    - Dragger + + Dragger +
    {#if rendered}
    thread.id !== thread_id); + const filteredThreads = getFilteredThreads((thread) => thread.id !== thread_id); + setThreads(filteredThreads); + return filteredThreads; } export async function setActiveThreadName(name) { From 637d122824ad6fa222e99ff7e670b0862b7e3c7a Mon Sep 17 00:00:00 2001 From: Jack Italiano Date: Fri, 16 Feb 2024 13:04:23 -0500 Subject: [PATCH 03/16] fix threads not updating on new thread, fix some styles --- src/App.svelte | 23 ++++---- src/components/ButtonRevealButton.svelte | 73 +++++++++++++++--------- src/components/Navbar.svelte | 3 +- src/components/Sidebar.svelte | 2 +- src/components/SlideButtonReveal.svelte | 6 +- 5 files changed, 63 insertions(+), 44 deletions(-) diff --git a/src/App.svelte b/src/App.svelte index c7ddad0..cbfa437 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -123,12 +123,12 @@ return true; } - activeThread = await getNewThread(); - threads.unshift(activeThread); + const thread = await getNewThread(); + threads.unshift(thread); setThreads(threads); - await switchActiveThread(activeThread); + await switchActiveThread(thread); return true; } @@ -148,6 +148,9 @@ async function switchActiveThread(thread) { + if (thread.id === activeThread.id) { + return; + } await setThread(thread); keyAsstAndThread = await getKeyAsstAndThread(); @@ -214,16 +217,16 @@
  • Paste your key into the input field below. Your browser will save the key, so you only have to enter it once.
      • -
    • With OpenAI API you only pay for what you use. Track your usage and costs on the Usage page.
      • +
    • With OpenAI API you only pay for what you use. Track your usage and costs on the Usage page.
    • After you send your first message to BIDARA, it will also be available to interact with through the OpenAI Assistants Playground. This interface is more complex, but also provides more customizability. Just select BIDARA, then click the 'Test' button.
    {#if keyAsstAndThread !== null} {#key deepChatWidth} -
    -
    +
    -
    +
    +
    {#key activeThread} @@ -400,32 +403,28 @@ #chat-container { width: 100%; margin-left: 0; - transition: ease 0.3s; + transition: width 0.3s ease, filter 0.2s ease-out; } .open #chat-container { width: 80%; - margin-left: 20%; } @media only screen and (max-width: 1000px) { .open #chat-container { width: 70%; - margin-left: 30%; } } @media only screen and (max-width: 900px) { .open #chat-container { width: 60%; - margin-left: 40%; } } @media only screen and (max-width: 700px) { .open #chat-container { width: 100%; - margin-left: 0; } } diff --git a/src/components/ButtonRevealButton.svelte b/src/components/ButtonRevealButton.svelte index aa26b6d..f8c3267 100644 --- a/src/components/ButtonRevealButton.svelte +++ b/src/components/ButtonRevealButton.svelte @@ -13,33 +13,33 @@
    -
    - -

    {buttonText}

    - - revealed unfocused select - revealed focused select - -
    +
    + +

    {buttonText}

    + + revealed unfocused select + revealed focused select + +
    diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte index 2fb80dd..1c0cb44 100644 --- a/src/components/Navbar.svelte +++ b/src/components/Navbar.svelte @@ -62,9 +62,10 @@ header { background-color: rgb(229, 229, 234); z-index: 10; - border-bottom: 1px solid rgb(199, 199, 204); + border-bottom: 1px solid rgb(180, 180, 180); } button { + width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte index 741b3b6..fb2e1c7 100644 --- a/src/components/Sidebar.svelte +++ b/src/components/Sidebar.svelte @@ -41,7 +41,7 @@ left: -20%; transition: ease 0.3s; background-color: rgb(229, 229, 234); - border-right: 1px solid rgb(199, 199, 204); + border-right: 1px solid rgb(180, 180, 180); overflow-y: auto; } diff --git a/src/components/SlideButtonReveal.svelte b/src/components/SlideButtonReveal.svelte index c070f48..655d3a8 100644 --- a/src/components/SlideButtonReveal.svelte +++ b/src/components/SlideButtonReveal.svelte @@ -153,13 +153,15 @@ } .slider-button { + overflow: hidden; + whitespace: nowrap; height: 100%; width: 100%; left: 0; top: 0; padding: 1em; z-index: 25 !important; - border-bottom: 1px solid rgb(199, 199, 204); + border-bottom: 1px solid rgb(180, 180, 180); transition: background-color 0.3s ease; } @@ -180,7 +182,7 @@ left: 0; top: 0; transition: margin-right 0.3s ease; - border-bottom: 1px solid rgb(174, 174, 178); + border-bottom: 1px solid rgb(180, 180, 180); } .reveal-image { From 3c2aa727b9184b172945bf244f889ae8a18726e2 Mon Sep 17 00:00:00 2001 From: Jack Italiano Date: Fri, 16 Feb 2024 15:48:51 -0500 Subject: [PATCH 04/16] bringing in new nav/sidebar changes (WIP) - currently won't update activeThreadName or activeThreadId --- src/App.svelte | 27 +++++++++++++++++---------- src/utils/threadUtils.js | 16 ++++++++-------- 2 files changed, 25 insertions(+), 18 deletions(-) diff --git a/src/App.svelte b/src/App.svelte index d6ef433..da58e95 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -8,8 +8,7 @@ import { BIDARA_CONFIG } from './assistant/bidara'; import { funcCalling } from './assistant/bidaraFunctions'; import { setOpenAIKey, setAsst, getKeyAsstAndThread, getBidaraAssistant } from './utils/openaiUtils'; - import { setThread, getThread, deleteThreadFromThreads, getNewThread, getThreads, setThreads, setActiveThreadName, updateThreadAndThreads, getEmptyThreads, floatThreadInThreads } from './utils/threadUtils'; - import { getStoredActiveThread } from './utils/storageUtils'; + import { setThread, getThread, deleteThreadFromThreads, getNewThread, getThreads, setThreads, setActiveThreadName, updateThreadAndThreads, getEmptyThreads } from './utils/threadUtils'; import hljs from "highlight.js"; window.hljs = hljs; @@ -21,7 +20,6 @@ let openAIKeySet = false; let openAIAsstIdSet = false; - let openAIThreadIdSet = false; let changedToLoggedInView = false; let keyAsstAndThread = null; let welcomeRef; @@ -32,6 +30,8 @@ let threads; let activeThread; + let activeThreadName = ""; + let activeThreadId = ""; function onError(error) { console.log(error); @@ -72,6 +72,7 @@ } async function onComponentRender() { + console.log("render"); // save key to localStorage. // The event occurs before key is set, and again, after key is set. if (!openAIKeySet && this._activeService.key) { @@ -95,6 +96,8 @@ navbarRef.style.display = "none"; deepChatRef.style.width = "calc(100vw - 1rem)"; deepChatRef.style.height = "100px"; + activeThread = {name: "", id: ""}; + console.log("not set"); } else if (!changedToLoggedInView) { // Hide login instructions after login. welcomeRef.style.display = "none"; @@ -102,8 +105,10 @@ deepChatRef.style.height = "calc(100dvh - 3.1rem)"; await initKeyAsstAndThreads(); changedToLoggedInView = true; + console.log("not set"); } else { // Using cached login + console.log("cached"); deepChatRef.style.width = "100%"; } } @@ -225,15 +230,16 @@
  • After you send your first message to BIDARA, it will also be available to interact with through the OpenAI Assistants Playground. This interface is more complex, but also provides more customizability. Just select BIDARA, then click the 'Test' button.
    • -
    -
    - -
    + {#if keyAsstAndThread !== null} +
    + +
    +
    + {#key activeThread}
    - {#key activeThread} - - {/key} +
    + {/key}
    @@ -391,6 +397,7 @@ {/key}
    + {/if} diff --git a/src/utils/threadUtils.js b/src/utils/threadUtils.js index 9c7f65b..b2a1100 100644 --- a/src/utils/threadUtils.js +++ b/src/utils/threadUtils.js @@ -92,15 +92,15 @@ export function updateThreadAndThreads(activeThread, threads) { const storedThread = getStoredActiveThread(); const storedThreads = getStoredThreads(); - if (activeThread != storedThread) { - threads = threads.map((thread) => { - if (thread.id === activeThread.id) { - return activeThread; - } - return thread; - }); - + if (threads) { + threads = threads.map((thread) => { + if (thread.id === activeThread.id) { + return activeThread; + } + return thread; + }); + } setStoredActiveThread(activeThread); } From 30920ef0e9634bd0f6b90a0d1b0d9cce6b7a8b60 Mon Sep 17 00:00:00 2001 From: Jack Italiano Date: Tue, 20 Feb 2024 15:58:51 -0500 Subject: [PATCH 05/16] fix loading of active thread, stop rerendering unnecessarily on loading new --- src/App.svelte | 34 ++++++++++++++++++---------------- src/components/Navbar.svelte | 5 ++++- src/utils/openaiUtils.js | 16 ++++++++++++++-- src/utils/threadUtils.js | 21 ++++++++------------- 4 files changed, 44 insertions(+), 32 deletions(-) diff --git a/src/App.svelte b/src/App.svelte index da58e95..7c8b190 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -22,6 +22,7 @@ let openAIAsstIdSet = false; let changedToLoggedInView = false; let keyAsstAndThread = null; + let activeThread = null; let welcomeRef; let navbarRef; let sidebarRef; @@ -29,9 +30,6 @@ let open = false; let threads; - let activeThread; - let activeThreadName = ""; - let activeThreadId = ""; function onError(error) { console.log(error); @@ -43,8 +41,11 @@ async function initKeyAsstAndThreads() { keyAsstAndThread = await getKeyAsstAndThread(); + activeThread = null; if (keyAsstAndThread && keyAsstAndThread[0]) { + openAIKeySet = true; + changedToLoggedInView = true; threads = getThreads(); activeThread = keyAsstAndThread[2]; @@ -67,12 +68,13 @@ openAIAsstIdSet = true; } - activeThread.length = deepChatRef.getMessages().length; - updateThreads(); + if (activeThread) { + activeThread.length = deepChatRef.getMessages().length; + updateThreads(); + } } async function onComponentRender() { - console.log("render"); // save key to localStorage. // The event occurs before key is set, and again, after key is set. if (!openAIKeySet && this._activeService.key) { @@ -93,22 +95,16 @@ if(!openAIKeySet) { // Show login instructions. welcomeRef.style.display = "block"; - navbarRef.style.display = "none"; deepChatRef.style.width = "calc(100vw - 1rem)"; deepChatRef.style.height = "100px"; - activeThread = {name: "", id: ""}; - console.log("not set"); } else if (!changedToLoggedInView) { // Hide login instructions after login. welcomeRef.style.display = "none"; - navbarRef.style.display = "block"; deepChatRef.style.height = "calc(100dvh - 3.1rem)"; await initKeyAsstAndThreads(); changedToLoggedInView = true; - console.log("not set"); } else { // Using cached login - console.log("cached"); deepChatRef.style.width = "100%"; } } @@ -231,15 +227,21 @@
    {#if keyAsstAndThread !== null} -
    - -
    + {#if activeThread !== null} + {#key activeThread} +
    + +
    + {/key} + {/if}
    + {#if activeThread !== null} {#key activeThread}
    - +
    {/key} + {/if}
    diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte index 15df063..ea37b70 100644 --- a/src/components/Navbar.svelte +++ b/src/components/Navbar.svelte @@ -9,6 +9,10 @@ let editing_name = false; let editing_input; + if (!chat_name) { + chat_name = ""; + } + function handleButtonClick() { editing_name = true; } @@ -42,7 +46,6 @@ editing_input.focus(); } } -
    diff --git a/src/utils/openaiUtils.js b/src/utils/openaiUtils.js index aac8519..9b4dfad 100644 --- a/src/utils/openaiUtils.js +++ b/src/utils/openaiUtils.js @@ -176,6 +176,11 @@ export async function validThread(thread_id) { if(!openaiKey) { throw new Error('openai key not set. cannot validate thread.'); } + + if (!thread_id) { + return false; + } + try { const response = await fetch(`https://api.openai.com/v1/threads/${thread_id}`, { method: "GET", @@ -187,11 +192,18 @@ export async function validThread(thread_id) { body: null }); - const r = await response.json(); - if (r.hasOwnProperty('error') && r.error.type === 'invalid_request_error') { + if (response.status === 404) { + console.error("Thread not found."); return false; } + const r = await response.json(); + if (r.hasOwnProperty('error')) { + if (r.error.type === 'invalid_request_error') { + return false; + } + } + if (r.hasOwnProperty('id')) { return true; } diff --git a/src/utils/threadUtils.js b/src/utils/threadUtils.js index b2a1100..e252eb8 100644 --- a/src/utils/threadUtils.js +++ b/src/utils/threadUtils.js @@ -13,27 +13,22 @@ export async function getNewThread() { } export async function getThread() { - const thread = getStoredActiveThread(); + var thread = getStoredActiveThread(); - let isValidThreadId = false; + var isValidThreadId = false; if (thread !== null) { isValidThreadId = await validThread(thread.id); } - if (isValidThreadId) { - return thread; - } - - if (thread === null) { - const new_thread = await getNewThread(); + while (!isValidThreadId) { + thread = await getNewThread(); - setThreads([new_thread]); - setThread(new_thread); - - return new_thread; + if (thread !== null) { + isValidThreadId = await validThread(thread.id); + } } - return null; + return thread; } export async function setThread(thread) { From b7bf0504dbf8b7620109fe366b62771244694bb9 Mon Sep 17 00:00:00 2001 From: Jack Italiano Date: Tue, 20 Feb 2024 16:31:09 -0500 Subject: [PATCH 06/16] change a tag to button for trash on large screen --- src/components/ButtonRevealButton.svelte | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/ButtonRevealButton.svelte b/src/components/ButtonRevealButton.svelte index f8c3267..8cb61f7 100644 --- a/src/components/ButtonRevealButton.svelte +++ b/src/components/ButtonRevealButton.svelte @@ -4,16 +4,18 @@ export let selected = false; - export let revealedButtonFocusImage; - export let revealedButtonUnfocusImage; - export let revealedButtonFocusBgColor; - export let revealedButtonUnfocusBgColor; - export let buttonBgColor; - export let buttonText; + export let revealedButtonFocusImage; + export let revealedButtonUnfocusImage; + export let revealedButtonFocusBgColor; + export let revealedButtonUnfocusBgColor; + export let buttonBgColor; + export let buttonText;

    {buttonText}

    - - revealed unfocused select - revealed focused select - +
    From 873af6a0929cbc2df879ab053ed143fc947d631d Mon Sep 17 00:00:00 2001 From: Jack Italiano Date: Wed, 21 Feb 2024 11:02:27 -0500 Subject: [PATCH 07/16] Close menu when select or new chat on mobile --- src/components/Chat.svelte | 4 ++-- src/components/Sidebar.svelte | 24 +++++++++++++++++++++++- src/components/SlideButtonReveal.svelte | 2 +- 3 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/components/Chat.svelte b/src/components/Chat.svelte index fff1921..9ff7937 100644 --- a/src/components/Chat.svelte +++ b/src/components/Chat.svelte @@ -17,11 +17,11 @@ const trashBgColor = 'rgb(255, 59, 48)'; async function handleSelectThread() { - handleSelect(thread); + handleSelect(); } async function handleDeleteThread() { - const success = handleDelete(thread); + const success = handleDelete(); // Make visual cue that weren't allowed to delete thread; } diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte index 7f3176e..00e847e 100644 --- a/src/components/Sidebar.svelte +++ b/src/components/Sidebar.svelte @@ -8,6 +8,10 @@ import Chat from './Chat.svelte' + function isMobile() { + return window.innerWidth < 700; + } + async function handleButtonClick(event) { event.target.style.transition = 'background-color 0.2s ease color 0.2s ease'; event.target.style.backgroundColor = 'rgb(209,209,214)'; @@ -17,6 +21,24 @@ setTimeout(() => { event.target.style.backgroundColor = 'rgb(242, 242, 247)'; }, 200); + + if (isMobile()) { + open = false; + } + } + + async function handleChatClick(thread) { + handleChatSelect(thread); + + console.log("click"); + if (isMobile()) { + console.log("open false"); + open = false; + } + } + + async function handleChatSwipe(thread) { + handleChatDelete(thread); } @@ -26,7 +48,7 @@ diff --git a/src/components/SlideButtonReveal.svelte b/src/components/SlideButtonReveal.svelte index 655d3a8..e2df9f5 100644 --- a/src/components/SlideButtonReveal.svelte +++ b/src/components/SlideButtonReveal.svelte @@ -22,7 +22,7 @@ let touching = false; let wasDragged = false - let clicked = selected; + let clicked = false; let clickTolerance = 5; let deltaX = 0; From 6d0ef650e168dc3b0ef1bb139f8d736a0013a110 Mon Sep 17 00:00:00 2001 From: Jack Italiano Date: Wed, 21 Feb 2024 11:16:58 -0500 Subject: [PATCH 08/16] add blur deep-chat while rendering - add blur filter (2px) to deep-chat initially and when switching threads - remove blur 200ms after rendering completed --- src/App.svelte | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/App.svelte b/src/App.svelte index 02c1c40..d40381c 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -28,6 +28,7 @@ let sidebarRef; let deepChatRef; let open = false; + let blurred = true; let threads; @@ -105,6 +106,9 @@ await initKeyAsstAndThreads(); changedToLoggedInView = true; } + + console.log("rendered"); + setTimeout(()=> blurred = false, 200); } async function newThreadAndSwitch() { @@ -155,6 +159,8 @@ return; } + blurred = true; + await setThread(thread); keyAsstAndThread = await getKeyAsstAndThread(); activeThread = keyAsstAndThread[2]; @@ -247,6 +253,7 @@ Date: Wed, 21 Feb 2024 11:40:08 -0500 Subject: [PATCH 09/16] fixed the A11y errors. Added keyboard support to sidebar buttons. --- src/components/ButtonRevealButton.svelte | 17 ++++++++++------- src/components/SlideButtonReveal.svelte | 4 ++-- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/ButtonRevealButton.svelte b/src/components/ButtonRevealButton.svelte index 8cb61f7..6e73501 100644 --- a/src/components/ButtonRevealButton.svelte +++ b/src/components/ButtonRevealButton.svelte @@ -13,24 +13,27 @@
    -
    -

    {buttonText}

    - -
    +
    diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte index 00e847e..ab86a75 100644 --- a/src/components/Sidebar.svelte +++ b/src/components/Sidebar.svelte @@ -8,7 +8,7 @@ import Chat from './Chat.svelte' - function isMobile() { + function isSmallScreen() { return window.innerWidth < 700; } @@ -22,7 +22,7 @@ event.target.style.backgroundColor = 'rgb(242, 242, 247)'; }, 200); - if (isMobile()) { + if (isSmallScreen()) { open = false; } } @@ -30,9 +30,7 @@ async function handleChatClick(thread) { handleChatSelect(thread); - console.log("click"); - if (isMobile()) { - console.log("open false"); + if (isSmallScreen()) { open = false; } } @@ -41,9 +39,17 @@ handleChatDelete(thread); } + function handleTransitionEnd() { + if (!open) { + document.getElementById("sidebar").classList.add(".display-none"); + } else { + document.getElementById("sidebar").classList.remove(".display-none"); + } + } + -
    diff --git a/src/assistant/bidaraFunctions.js b/src/assistant/bidaraFunctions.js index 117d887..49b0337 100644 --- a/src/assistant/bidaraFunctions.js +++ b/src/assistant/bidaraFunctions.js @@ -43,13 +43,13 @@ export async function ssSearch(params) { async function genImage(params) { - var imageParams = JSON.parse(params); + let imageParams = JSON.parse(params); if ("parameters" in imageParams) { imageParams = imageParams.parameters; } - var imageDescription = JSON.stringify(imageParams.description) + " Realistic depiction of the object and its environment. Stay true to science, engineering, and biology. DO NOT INCLUDE ANY WORDS OR BRANDING." + let imageDescription = JSON.stringify(imageParams.description) + " Realistic depiction of the object and its environment. Stay true to science, engineering, and biology. DO NOT INCLUDE ANY WORDS OR BRANDING." const res = await getDalleImageGeneration(imageDescription); diff --git a/src/utils/threadUtils.js b/src/utils/threadUtils.js index 2a514ce..e16789d 100644 --- a/src/utils/threadUtils.js +++ b/src/utils/threadUtils.js @@ -13,9 +13,9 @@ export async function getNewThread() { } export async function getThread() { - var thread = getStoredActiveThread(); + let thread = getStoredActiveThread(); - var isValidThreadId = false; + let isValidThreadId = false; if (thread !== null) { isValidThreadId = await validThread(thread.id); } @@ -26,15 +26,18 @@ export async function getThread() { setThread(thread); } - var threads = getStoredThreads(); + let threads = getStoredThreads(); - const threadInThreads = threads.filter((t) => t.id == thread.id).length > 0; - if (threads && !threadInThreads) { - threads.unshift(thread); - setThreads(threads); + if (threads) { + const threadInThreads = threads.filter((t) => t.id == thread.id).length > 0; + + if (!threadInThreads) { + threads.unshift(thread); + setThreads(threads); + } - } else if (!threads){ + } else { threads = [thread]; setThreads(threads); } @@ -50,7 +53,7 @@ export async function setThread(thread) { } export function getThreads() { - var threads = getStoredThreads(); + let threads = getStoredThreads(); return threads; } From 6f82c7c09b62fe27f85ae545509b1cffdc6e76f0 Mon Sep 17 00:00:00 2001 From: Jack Italiano Date: Thu, 22 Feb 2024 15:48:22 -0500 Subject: [PATCH 15/16] put back in openAIKeySet and changedToLoggedInView --- src/App.svelte | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.svelte b/src/App.svelte index 18b3910..9fa8dd2 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -44,6 +44,8 @@ activeThread = null; if (keyAsstAndThread && keyAsstAndThread[0]) { + openAIKeySet = true; + changedToLoggedInView = true; threads = getThreads(); activeThread = keyAsstAndThread[2]; From af8925fd1561ec4f649277c1b72e583f5cddbab1 Mon Sep 17 00:00:00 2001 From: Brandon Ruffridge Date: Thu, 22 Feb 2024 16:03:16 -0500 Subject: [PATCH 16/16] removed openAIKeySet from initKeyAsstAndThreads so key set via URL variable is saved to localStorage. --- src/App.svelte | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/App.svelte b/src/App.svelte index 9fa8dd2..cf43521 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -44,7 +44,6 @@ activeThread = null; if (keyAsstAndThread && keyAsstAndThread[0]) { - openAIKeySet = true; changedToLoggedInView = true; threads = getThreads(); @@ -78,7 +77,7 @@ // save key to localStorage. // The event occurs before key is set, and again, after key is set. if (!openAIKeySet && this._activeService.key) { - // if key set through UI, save it to localStorage. + // if key set through UI or in URL variable, save it to localStorage. setOpenAIKey(this._activeService.key); openAIKeySet = true; }