much better info for key retrieval

Xyntopia · Dec 14, 2023 · 4a9dea9 · 4a9dea9
1 parent b5c6420
commit 4a9dea9
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 71 deletions.
diff --git a/src/components/OpenRouterPKCE.vue b/src/components/OpenRouterPKCE.vue
@@ -2,6 +2,7 @@
   <div class="row items-center">
     <div class="col">
       <q-btn
+        class="fit"
         label="Login to Openrouter.ai service"
         icon="key"
         noCaps
@@ -11,38 +12,28 @@
       </q-btn>
     </div>
     <div class="col-auto">
-      <q-btn flat rounded dense icon="info" @click="showInfo = true">
-        <q-dialog v-model="showInfo">
-          <q-card>
-            <q-card-section>
-              <QMarkdown
-                src="
+      <InfoDialog
+        info-text="
 www.openrouter.ai is a service which brings you a large number of AI
 models: Once registered you have access to a large number of models:
 
 - The free mistral model 
 - All OpenAI Models including ChatGPT4 
 - LLama2 
-- ... and a lot more!
-        "
-              />
-            </q-card-section>
-          </q-card>
-        </q-dialog>
-      </q-btn>
+- ... and a lot more!"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, computed } from 'vue';
+import { onMounted, computed } from 'vue';
 import { useTaskyonStore } from 'src/stores/taskyonState';
 import { useRoute } from 'vue-router';
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown';
+import InfoDialog from 'components/InfoDialog.vue';
 
 const state = useTaskyonStore();
 const route = useRoute();
-const showInfo = ref(false);
 
 const callbackUrl = window.location.origin; // This will get the base URL of your application
 

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
@@ -20,6 +20,24 @@
       <q-separator spaced />
       <div class="q-pa-sm q-gutter-md">
         <div>Select Default AI Provider</div>
+        <div>
+          you can find available models here:
+          <q-btn
+            flat
+            color="accent"
+            href="https://openrouter.ai/api/v1/models"
+            target="_blank"
+            >https://openrouter.ai/api/v1/models</q-btn
+          >
+          as soon as you have logged in to your openrouter account:
+          <q-btn
+            flat
+            color="accent"
+            href="https://accounts.openrouter.ai/sign-in"
+            target="_blank"
+            >https://accounts.openrouter.ai/sign-in</q-btn
+          >
+        </div>
         <q-select
           v-model="state.chatState.selectedApi"
           emit-value

diff --git a/src/pages/TaskChat.vue b/src/pages/TaskChat.vue
@@ -132,61 +132,34 @@
         </CreateNewTask>
         <!--API Key hint-->
         <q-card v-else>
-          <q-card-section class="q-gutter-md">
-            <q-list>
-              <!-- Authentication Option -->
-              <q-item>
-                <q-item-section>
-                  <q-item-label>Authentication Option</q-item-label>
-                  <q-item-label caption>Use Openrouter.ai service</q-item-label>
-                </q-item-section>
-                <q-item-section side>
-                  <div><OpenRouterPKCE /></div
-                ></q-item-section>
-              </q-item>
-
-              <!-- API Key Access -->
-              <q-item>
-                <q-item-section>
-                  <q-item-label>Add an OpenAI API key</q-item-label>
-                  <q-item-label caption
-                    >To access a chatbot in Settings</q-item-label
-                  >
-                </q-item-section>
-                <q-item-section side>
-                  <q-btn
-                    outline
-                    noCaps
-                    href="https://platform.openai.com/account/api-keys"
-                    target="_blank"
-                  >
-                    Go to OpenAI
-                  </q-btn>
-                </q-item-section>
-              </q-item>
-
-              <!-- Alternate API Key Access -->
-              <q-item>
-                <q-item-section>
-                  <q-item-label
-                    >Alternate API Key Accessto Openouter.ai</q-item-label
-                  >
-                  <q-item-label caption
-                    >Access keys via OpenRouter</q-item-label
-                  ></q-item-section
-                >
-                <q-item-section side>
-                  <q-btn
-                    outline
-                    noCaps
-                    href="https://openrouter.ai/keys"
-                    target="_blank"
-                  >
-                    Go to Openrouter.ai
-                  </q-btn>
-                </q-item-section>
-              </q-item>
-            </q-list>
+          <q-card-section class="q-gutter-md column">
+            <OpenRouterPKCE />
+            <div class="row">
+              <q-btn
+                class="col"
+                label="Go to OpenAI"
+                outline
+                noCaps
+                href="https://platform.openai.com/account/api-keys"
+                target="_blank"
+              />
+              <InfoDialog
+                info-text="Get an API key from https://openrouter.ai/keys and use it for inference tasks"
+              />
+            </div>
+            <div class="row">
+              <q-btn
+                class="col"
+                label="Access keys via OpenRouter Dashboard"
+                outline
+                noCaps
+                href="https://openrouter.ai/keys"
+                target="_blank"
+              />
+              <InfoDialog
+                info-text="Get an API key from https://www.openrouter.ai and use it for inference tasks"
+              />
+            </div>
           </q-card-section>
           <q-card-section>
             If getting keys manually, add them to settings manually:
@@ -249,6 +222,7 @@ import '@quasar/quasar-ui-qmarkdown/dist/index.css';
 import { useTaskyonStore } from 'stores/taskyonState';
 import CreateNewTask from 'components/CreateNewTask.vue';
 import OpenRouterPKCE from 'src/components/OpenRouterPKCE.vue';
+import InfoDialog from 'src/components/InfoDialog.vue';
 import {
   emitCancelAllTasks,
   emitCancelCurrentTask,