refactor

Author: azmy60

src/assets/styles/_base.scss

@@ -60,5 +60,5 @@ a {
 
 ::-webkit-scrollbar-thumb {
   background: var(--theme-scrollbar-thumb);
-  border-radius: 4px;
+  border-radius: 2px;
 }

src/assets/styles/components/_run-query-message.scss

@@ -1,5 +1,8 @@
 .run-query-message {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
   .view-more-btn {
-    margin-top: 0.5rem;
+    width: max-content;
   }
 }

src/components/ApiKeyForm.vue

@@ -54,7 +54,7 @@
 
 <script lang="ts">
 import { PropType } from "vue";
-import { Providers, ProviderId } from "../providers/modelFactory";
+import { Providers, ProviderId, BaseProvider } from "../providers";
 import { mapState } from "pinia";
 import { useProviderStore } from "../store";
 
@@ -91,15 +91,16 @@ export default {
     ...mapState(useProviderStore, [
       'messages',
     ]),
-    providers() {
+    providers(): (typeof BaseProvider)[] {
+      const providers = Object.keys(Providers).map((key) => Providers[key]);
       if (import.meta.env.MODE === "development") {
-        return Providers;
+        return providers;
       }
-      return Providers.filter((p) => p.id !== "mock");
+      return providers.filter((p) => p.id !== "mock");
     },
     selectedProviderName() {
       return (
-        this.providers.find((p) => p.id === this.selectedProviderId)?.label ||
+        this.providers.find((p) => p.id === this.selectedProviderId)?.displayName ||
         ""
       );
     },

src/components/ChatInterface.vue

@@ -145,7 +145,6 @@
 </template>
 
 <script lang="ts">
-import { Providers as UIProviders } from "../providers/modelFactory";
 import { mapState, mapActions, mapGetters } from "pinia";
 import { useProviderStore } from "../store";
 import Message from "./Message.vue";
@@ -200,9 +199,6 @@ export default {
     ...mapGetters(useProviderStore, [
       "canSendMessage",
     ]),
-    providers() {
-      return UIProviders;
-    },
     navigatingHistory() {
       return this.historyIndex === this.inputHistory.length;
     },

src/providers/index.ts

@@ -0,0 +1,15 @@
+import { ClaudeProvider } from "./ClaudeProvider";
+import { MockProvider } from "./MockProvider";
+
+export type { BaseProvider } from "./BaseModelProvider";
+
+export type ProviderId = keyof typeof Providers;
+
+export const Providers = {
+  claude: ClaudeProvider,
+  mock: MockProvider,
+}
+
+export function getProviderIds() {
+
+}

src/providers/modelFactory.ts

@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 import { STORAGE_KEYS } from "./config";
 import { IModel } from "./types";
 import _ from "lodash";
-import { createProvider, ProviderId } from "./providers/modelFactory";
+import { ProviderId, Providers } from "./providers";
 import {
   BaseMessage,
   HumanMessage,
@@ -106,7 +106,12 @@ export const useProviderStore = defineStore("providers", {
       if (this.conversationTitle) {
         this.isGeneratingConversationTitle = true;
       }
-      this.provider = await createProvider(this.providerId, this.apiKey);
+      const providerClass = Providers[this.providerId];
+      if (!providerClass) {
+        throw new Error(`Unknown provider: ${this.providerId}`);
+      }
+      this.provider = new providerClass();
+      await this.provider.initialize(this.apiKey);
       this.models = this.provider.models;
       let modelId = this.models[0].id;
       const storedModelId = localStorage.getItem(STORAGE_KEYS.MODEL);