From 009e095eeba906ec179b5a68de4fb93b3633a8a4 Mon Sep 17 00:00:00 2001
From: yeus <Thomas.Meschede@web.de>
Date: Mon, 15 Apr 2024 23:39:26 -0700
Subject: [PATCH] start creating an iframe-version of our chat :)

---
 src/components/CreateNewTask.vue  | 33 +++++++++++++++-----
 src/components/DarkModeButton.vue |  1 +
 src/layouts/Widgets.vue           | 52 +++++++++++++++++++++++++++----
 src/stores/taskyonState.ts        |  3 ++
 4 files changed, 76 insertions(+), 13 deletions(-)

diff --git a/src/components/CreateNewTask.vue b/src/components/CreateNewTask.vue
index fcd34cf8..174f8abd 100644
--- a/src/components/CreateNewTask.vue
+++ b/src/components/CreateNewTask.vue
@@ -36,6 +36,7 @@
         </template>
         <template v-slot:after>
           <q-btn
+            v-if="state.appConfiguration.enableTaskSettingsButton"
             flat
             dense
             icon="tune"
@@ -100,7 +101,12 @@
         class="row items-center"
         v-if="selectedTaskType || state.expandedTaskCreation"
       >
-        <q-btn v-if="selectedTaskType" class="q-ma-md" label="Execute Task" @click="executeTask" />
+        <q-btn
+          v-if="selectedTaskType"
+          class="q-ma-md"
+          label="Execute Task"
+          @click="executeTask"
+        />
         <q-btn
           v-if="selectedTaskType"
           flat
@@ -207,12 +213,25 @@
                 }}</q-tooltip>
               </template></q-option-group
             >
-            <q-btn
-              class="q-ma-md"
-              dense
-              label="toggle all allowed tools"
-              @click="toggleSelectedTools"
-            />
+            <div class="row q-pl-md">
+              <q-btn
+                dense
+                label="toggle all allowed tools"
+                @click="toggleSelectedTools"
+              />
+              <q-space/>
+              <q-btn
+                flat
+                dense
+                icon="tune"
+                @click="
+                  () => {
+                    state.expandedTaskCreation = !state.expandedTaskCreation;
+                  }
+                "
+                ><q-tooltip> Toggle Task Settings </q-tooltip>
+              </q-btn>
+            </div>
           </q-item-section>
         </q-expansion-item>
       </q-list>
diff --git a/src/components/DarkModeButton.vue b/src/components/DarkModeButton.vue
index 6f78df91..ec82f043 100644
--- a/src/components/DarkModeButton.vue
+++ b/src/components/DarkModeButton.vue
@@ -11,6 +11,7 @@
         : 'light_mode'
     "
     @click="toggleTheme"
+    v-bind="$attrs"
   >
     <q-tooltip
       >Theme:
diff --git a/src/layouts/Widgets.vue b/src/layouts/Widgets.vue
index 5852bed0..0061da32 100644
--- a/src/layouts/Widgets.vue
+++ b/src/layouts/Widgets.vue
@@ -1,19 +1,53 @@
 <template>
   <q-layout view="hHh Lpr fFf">
-    <q-header class="row bg-transparent">
+    <q-header class="row items-center">
       <!-- Be sure to play with the Layout demo on docs -->
+      <q-btn
+        flat
+        @click="state.drawerOpen = !state.drawerOpen"
+        dense
+        icon="menu"
+        :size="btnsize"
+      />
+      <q-separator vertical :dark="!$q.dark.isActive"></q-separator>
+      <q-btn
+        flat
+        dense
+        :size="btnsize"
+        icon="reviews"
+        to="/"
+        @click="state.chatState.selectedTaskId = undefined"
+        ><q-tooltip>Create New Chat</q-tooltip>
+      </q-btn>
+      <q-space />
+      <q-btn
+        v-if="errors.length > 0"
+        flat
+        dense
+        round
+        color="warning"
+        icon="warning"
+        to="diagnostics"
+      >
+        <q-tooltip
+          >There was problem with taskyon!, click here to find out
+          more..</q-tooltip
+        >
+      </q-btn>
+      <dark-mode-button
+        :size="btnsize"
+        @theme-changed="(newMode) => (state.darkTheme = newMode)"
+      />
+
       <q-btn
         flat
         dense
         size="xs"
-        icon="launch"
-        color="grey-6"
+        icon="svguse:taskyon_mono_opt.svg#taskyon"
         type="a"
         href="/chat"
         target="_blank"
-        label="Manage Chat Window"
       />
-      <q-space />
       <q-btn
         flat
         dense
@@ -24,7 +58,6 @@
         href="http://www.xyntopia.com"
         target="_blank"
         aria-label="Visit Xyntopia"
-        label="xyntopia.com"
       />
       <!--<q-img width="30px" src="~assets/xyntopia.svg" />-->
     </q-header>
@@ -42,4 +75,11 @@
 import { useRoute } from 'vue-router';
 const route = useRoute();
 route.query; //has all the parameters :)
+
+import DarkModeButton from 'components/DarkModeButton.vue';
+import { useTaskyonStore } from 'stores/taskyonState';
+import { errors } from 'boot/taskyon';
+
+const state = useTaskyonStore();
+const btnsize = 'xs';
 </script>
diff --git a/src/stores/taskyonState.ts b/src/stores/taskyonState.ts
index 4a60b7d1..0303a471 100644
--- a/src/stores/taskyonState.ts
+++ b/src/stores/taskyonState.ts
@@ -52,6 +52,7 @@ export const useTaskyonStore = defineStore(storeName, () => {
       showCosts: false,
       gdriveDir: 'taskyon',
       useEnterToSend: true,
+      enableTaskSettingsButton: true,
     },
     // chatState & appConfiguration define the state of our app!
     // the rest of the state is eithr secret (keys) or temporary states which don't need to be saved
@@ -61,6 +62,8 @@ export const useTaskyonStore = defineStore(storeName, () => {
       return keys;
     }, {} as Record<string, string>),
     // app State which should be part of the configuration
+    // the things below should only represent transitional states
+    // which have no relevance in the actual configuration of the app.
     initialLoad: true, // if the app was loaded for the first time and needs to be initialized
     modelDetails: false,
     expandedTaskCreation: false,