Merge pull request #34 from terraphim/front_end_fixes

Multiple front end fixes
terraphim · Feb 12, 2024 · 8572642 · 8572642
2 parents 21fdac5 + 648f0b8
commit 8572642
Show file tree

Hide file tree

Showing 102 changed files with 16,521 additions and 126 deletions.
diff --git a/desktop/README.md b/desktop/README.md
@@ -1,48 +1,18 @@
-# Svelte + TS + Vite
+# Front end for Terraphim AI assistant
+Code shared between Tauri desktop and Web
 
-This template should help get you started developing with Svelte and TypeScript in Vite.
+Using Svelte + bulma (Svelma) + bulmaswatch 
 
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
-
-## Need an official Svelte framework?
-
-Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
-
-## Technical considerations
-
-**Why use this over SvelteKit?**
-
-- It brings its own routing solution which might not be preferable for some users.
-- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
-  `vite dev` and `vite build` wouldn't work in a SvelteKit environment, for example.
-
-This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
-
-Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
-
-**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
-
-Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
-
-**Why include `.vscode/extensions.json`?**
-
-Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
-
-**Why enable `allowJs` in the TS template?**
-
-While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
-
-**Why is HMR not preserving my local component state?**
-
-HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
-
-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+```
+yarn 
+yarn run dev
+yarn run tauri dev
+```
 
-```ts
-// store.ts
-// An extremely simple external store
-import { writable } from 'svelte/store'
-export default writable(0)
+To build
 ```
+yarn run build
+yarn run tauri build
+```
+
+See ../Earhtfile for pre-requisites
diff --git a/desktop/package.json b/desktop/package.json
@@ -31,6 +31,7 @@
     "node-sass": "^8.0.0",
     "sass": "^1.62.0",
     "svelma": "^0.4.5",
+    "svelte-jsoneditor": "^0.21.4",
     "tinro": "^0.6.12"
   }
 }
diff --git a/desktop/src/App.svelte b/desktop/src/App.svelte
@@ -81,7 +81,7 @@
             </i>
           </span>
         </a>
-      <a class="navbar-item" href="/fetch/json">Fetch</a>
+      <a class="navbar-item" href="/fetch/json">Configuration</a>
       <a class="navbar-item" href="/contacts">Contacts</a>
       </div>
   </nav>

diff --git a/desktop/src/lib/Fetchers/FetchTabs.svelte b/desktop/src/lib/Fetchers/FetchTabs.svelte
@@ -6,6 +6,31 @@
   import FetchRole from './FetchRole.svelte';
   import { Switch } from 'svelma';
   import {Agent} from '@tomic/lib';
+  import { JSONEditor } from 'svelte-jsoneditor';
+  import { CONFIG } from '../../config';
+  import {configStore} from '$lib/stores';
+  let content = {
+    // text: JSON.stringify($configStore, null, 2),
+    json: $configStore,
+  };
+  function handleChange(updatedContent) {
+    console.log('contents changed:', updatedContent);
+    configStore.update(config => {
+      config = updatedContent.json;
+      return config;
+    });
+    // post to server using /api/config 
+    let configURL = `${CONFIG.ServerURL}/config/`;
+    fetch(configURL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(updatedContent.json),
+    });
+    content = updatedContent;
+    content
+  }
   let data;
   let isWiki=false;
   let fetchUrl = 'https://raw.githubusercontent.com/terraphim/terraphim-cloud-fastapi/main/data/ref_arch.json';
@@ -55,6 +80,7 @@
     };
     syncWorker.postMessage(message);
   };
+  // This functiolity related to atomic server
   import { store } from '@tomic/svelte';
   import { getResource, getValue } from '@tomic/svelte';
   import { urls } from '@tomic/lib';
@@ -64,6 +90,7 @@
   
   const name = getValue<string>(resource1, urls.properties.name);
   const roles = getValue<string[]>(resource1, "http://localhost:9883/property/role");
+  // FIXME: update roles to configStore
   $: console.log("Print name", $name);
   $: console.log("Print roles", $roles);
 </script>
@@ -115,6 +142,13 @@
         >
     </Field>
   </Route>
+  <Route path="/editor">
+    <p><i>The best editing experience is to configure Atomic Server, in the meantime use editor below. You will need to refresh page via Command R or Ctrl-R to see changes</i></p>
+    <div class="editor">
+
+      <JSONEditor {content} onChange={handleChange} />
+    </div>
+  </Route>
 </div>
 <hr>
 <Field grouped position="is-right">
@@ -133,7 +167,8 @@
       </i>
     </span>
   </a>
-  <a class="navbar-item" href="/fetch/json">Fetch JSON</a>
+  <a class="navbar-item" href="/fetch/json">Fetch JSON Data</a>
   <a class="navbar-item" href="/fetch/atomic">Set Atomic Server</a>
+  <a class="navbar-item" href="/fetch/editor">Edit JSON config</a>
 </div>
 </nav>
diff --git a/desktop/src/lib/Search/Search.svelte b/desktop/src/lib/Search/Search.svelte
@@ -10,11 +10,11 @@
   let result: SearchResult[] = [];
   
   let currentSearchUrl;
-  function handleClick() {
+  async function handleClick() {
     if ($is_tauri) {
       console.log("Tauri config");
       console.log($input);
-      invoke('search', { searchQuery: {
+      await invoke('search', { searchQuery: {
         search_term: $input,
         skip: 0,
         limit: 10,
@@ -30,33 +30,28 @@
       console.log("Role config");
       console.log($role);
       console.log('The current value is: ',$serverUrl);
-  
-      fetch($serverUrl, {
+      let json_body= JSON.stringify({
+          search_term: $input,
+          skip: 0,
+          limit: 10,
+          role: $role,
+        });
+      console.log('The current value is: ',json_body);
+
+  const response = await fetch($serverUrl, {
         method: 'POST',
         headers: {
           accept: 'application/json',
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({
-          search_term: $input,
-          skip: 0,
-          limit: 10,
-          role: $role
-        }),
-      })
-        .then(response => response.json())
-        .then(data => {
-          console.log(data);
-          result = data;
-        })
-        .catch(e => console.error(e));
-    }
+        body: json_body,
+      });
+      const data = await response.json();
+      console.log(data);
+      result=data;
+  }
   }
 
-  //  (res) => {
-  // configStore=(JSON.parse(res));
-  //                   role.set(configStore[0].name);
-  //                 }
 </script>
 
 <Field>

diff --git a/desktop/src/lib/ThemeSwitcher.svelte b/desktop/src/lib/ThemeSwitcher.svelte
@@ -1,28 +1,36 @@
 <script lang="ts">
   import { invoke } from '@tauri-apps/api/tauri';
-  import { theme, role, is_tauri, serverUrl } from './stores';
+  import { theme, role, is_tauri, serverUrl, configStore, roles } from './stores';
   import { Field, Select } from 'svelma';
   import { CONFIG } from '../config';
-  let configStore =[];
+    import { event } from '@tauri-apps/api';
+  // let configStore =[];
   let port = 8000;
   let configURL="";
   export async function loadConfig() {
     try {
       if (window.__TAURI__) {
         is_tauri.set(true);
         if (is_tauri) {
-
           console.log('test is_tauri True');
           invoke('get_config').then((res) =>{
               console.log(`Message: ${res.global_shortcut}`);
-              configStore = res.roles;
-              role.set(Object.keys(configStore)[0]);
+              configStore.update(config => {
+                  // config["roles"] = res.roles;
+                  config = res;
+                  return config;
+              });
+              roles.update(roles => {
+              roles = data.roles;
+              return roles;
+            });
+              // configStore["roles"] = res.roles;
+              // FIXME: set to default role
+              role.set($configStore["roles"]["default"]);
+              theme.set($role['theme']);
               console.log('Role', $role);
-              console.log('Value', configStore[$role]['theme']);
               theme.set(configStore[$role]['theme']);
-              console.log(Object.keys(configStore));
-              console.log(configStore);
-              console.log(typeof configStore);
+
           })
             .catch((e) => console.error(e))
         } else {
@@ -31,21 +39,30 @@
         
       } else {
         is_tauri.set(false);
-        // configURL = `${CONFIG.ServerURL}/config/`;
-        configURL = `http://localhost:${port}/config/`;
+        configURL = `${CONFIG.ServerURL}/config/`;
+        // configURL = `http://localhost:${port}/config/`;
         console.log('test configURL ', configURL);
         fetch(configURL)
           .then(response => response.json())
           .then(data => {
             console.log('test data fetched', data);
-            configStore = data.roles;
-            role.set(Object.keys(configStore)[0]);
-            console.log('Role', $role);
-            console.log('Value', configStore[$role]['theme']);
-            theme.set(configStore[$role]['theme']);
-            console.log(Object.keys(configStore));
-            console.log(configStore);
-            console.log(typeof configStore);
+            configStore.update(config => {
+                  // config["roles"] = data.roles;
+                  config = data;
+                  return config;
+              });
+            roles.update(roles => {
+              roles = data.roles;
+              return roles;
+            });
+            // configStore = data.roles;
+            console.log('test configStore', $configStore);
+            console.log('test configStore default role ', $configStore["roles"]["default"]);
+            role.set($configStore["roles"]["default"]);
+            theme.set($role['theme']);
+            console.log("Keys in configstore", Object.keys($configStore));
+            console.log($configStore);
+            console.log(typeof $configStore);
           })
           .catch(e => console.error(e));
       }
@@ -58,46 +75,30 @@
   }
 
   async function initializeConfig() {
-    configStore = await loadConfig();
+    await loadConfig();
   }
 
   initializeConfig();
-  console.log('test ', configStore.length);
+  // console.log('test ', configStore.length);
   console.log('test CONFIG.ServerURL ', CONFIG.ServerURL);
-  
-  let themes = '';
-  $: if (themes) {
-    role.set(themes);
-    if (configStore[themes]!== undefined){
-    console.log("Setting up theme and url from config");
-    console.log(configStore[themes]);
-    console.log(configStore[themes].serverUrl);
-    theme.set(configStore[themes].theme);
-    if (configStore[themes].serverUrl !== undefined) {
-              console.log("Setting URL");
-              console.log(configStore[themes].serverUrl);
-              serverUrl.set(configStore[themes].serverUrl);
-              
-            }else{
-              serverUrl.set(`${CONFIG.ServerURL}/search`);
-              console.log("Fallback to default");
-            }
-  } else{
-      console.log(configStore);
-      console.log("Setting up default theme to spacelab");
-      theme.set('spacelab');
-      serverUrl.set(`${CONFIG.ServerURL}/search`);
-      console.log(configStore);
-    }
-}
-      
+  function updateRole(event) {
+    role.set(event.target.value.toLowerCase());
+    theme.set($roles[$role]['theme']);
+    console.log('Role changed:', event.target.value);
+    console.log('Role changed name:', event.target.value);
+    console.log('Role changed theme:', $theme);
+  }
 
 </script>
 
-<Field grouped position="is-right">
-  <Select bind:selected={themes}>
-    {#each Object.values(configStore) as role_value}
-      <option value={role_value.name}>{role_value.name}</option>
-    {/each}
-  </Select>
-</Field>
+<div class="field is-grouped is-grouped-right">
+  <div class="control">
+    <div class="select">
+      <select bind:value={$role} on:change={updateRole}>
+        {#each Object.values($roles) as role_value}
+          <option value={role_value.name.toLowerCase()}>{role_value.name}</option>
+        {/each}
+      </select>
+    </div>
+  </div>
+</div>
diff --git a/desktop/src/lib/stores.ts b/desktop/src/lib/stores.ts
@@ -6,6 +6,9 @@ const role = writable('selected');
 const is_tauri = writable(false);
 const atomic_configured = writable(false);
 const serverUrl=writable(`${CONFIG.ServerURL}/articles/search`);
+const configStore = writable([]);
+// FIXME: add default role
+const roles = writable({});
 
 let input = writable('');
-export { theme, role, is_tauri, input, serverUrl};
+export { theme, role, is_tauri, input, serverUrl,configStore, roles};
-Original file line number
+Diff line change
@@ Expand Up / @@ -81,7 +81,7 @@ @@
                 </i>
               </span>
             </a>
-          <a class="navbar-item" href="/fetch/json">Fetch</a>
+          <a class="navbar-item" href="/fetch/json">Configuration</a>
           <a class="navbar-item" href="/contacts">Contacts</a>
           </div>
       </nav>
@@ Expand Down @@