Merge pull request #29 from nasa-petal/ios-safari-display-fix

fix for blank deep-chat due to width issue on mobile and others

README.md

@@ -30,7 +30,8 @@ npm run dev
 
 ### Known issues
 
-- blank screen bug on threaded chat messages on ios safari.
+- add a loading icon, while thread is loading. so user doesn't just see the navbar and blank screen.
+- blank screen bug on threaded chat messages on ios safari and chrome.
 - deep-chat speechToText: submit command word is sent in message on safari and chrome on iOS.
 
 - deep-chat textToSpeech: doesn't read messages aloud on safari or chrome on iOS.

package.json

@@ -14,7 +14,7 @@
     "svelte": "^4.0.0"
   },
   "dependencies": {
-    "deep-chat-dev": "^9.0.131",
+    "deep-chat": "^1.4.11",
     "sirv-cli": "^2.0.0",
     "svelte-agnostic-draggable": "^0.2.0",
     "svelte-touch-to-mouse": "^1.0.0"

src/App.svelte

@@ -2,7 +2,7 @@
   https://codesandbox.io/p/sandbox/deep-chat-sveltekit-fn8h6x -->
 
   <script>
-    import { DeepChat } from "deep-chat-dev";
+    import { DeepChat } from "deep-chat";
     import { onMount } from 'svelte';
     import { Navbar, Sidebar } from './components';
     import { BIDARA_CONFIG } from './assistant/bidara';
@@ -113,13 +113,11 @@
       else if (!changedToLoggedInView) { // Hide login instructions after login. 
         welcomeRef.style.display = "none";
         navbarRef.style.display = "block";
+        deepChatRef.style.width = "100%";
         deepChatRef.style.height = "calc(100dvh - 3.1rem)";
         await initKeyAsstAndThreads();
         changedToLoggedInView = true;
       }
-      else { // Using cached login
-        deepChatRef.style.width = "100%";
-      }
     }
 
     async function newThreadAndSwitch() {
@@ -359,7 +357,8 @@
           }}
           initialMessages={initialMessages}
           chatStyle={{
-            width: "100vw",
+            display: "block",
+            width: "100%",
             height: "calc(100dvh - 3.1rem)",
             backgroundColor: "white",
             border: "none",

src/components/Hamburger.svelte

@@ -3,12 +3,16 @@
 </script>
 
 <div class="container flex items-center">
-    <a class="menu" class:open on:click={() => open = !open}>
+    <button tabindex="0" class="menu" class:open on:click={() => open = !open}>
         <img class="menu-image" src="chevron-right-blue.svg" alt="menu"/>
-    </a>
+    </button>
 </div>
 
 <style>
+    button {
+        padding: 3px;
+    }
+    
     .container {
         width: 2em;
         height: 2em;

src/components/Navbar.svelte

@@ -53,7 +53,7 @@
   {#if editing_name}
     <input type="text" bind:this={editing_input} class="px-3 py-1 rounded-full" on:blur={handleInputLeave} on:keydown={handleInputKeyDown}/>
   {:else}
-    <button class="focus:no-outline px-3 py-1 rounded-full" on:click={handleButtonClick}>{chat_name}</button>
+    <button tabindex="0" class="focus:no-outline px-3 py-1 rounded-full" on:click={handleButtonClick}>{chat_name}</button>
   {/if}
   <Logo/>	
 </header>

src/components/Sidebar.svelte

@@ -22,7 +22,7 @@
 </script>
 
   <aside class="absolute full shadow-lg flex flex-col" class:open>
-    <button class="new-thread rounded-full m-2 text-base font-sans p-2 focus:outline-none" on:click={handleButtonClick}>New Thread</button>
+    <button tabindex="0" class="new-thread rounded-full m-2 text-base font-sans p-2" disabled={!open} on:click={handleButtonClick}>New Thread</button>
     <nav class="w-full">
       {#if threads !== null}
         {#each threads as thread}