Merge pull request #268 from davidmyersdev/add-model-selector

Make Assistant model configurable
davidmyersdev · Feb 7, 2024 · 0c6928d · 0c6928d
2 parents ca45149 + 16e27c8
commit 0c6928d
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 40 deletions.
diff --git a/components/Assistant.vue b/components/Assistant.vue
@@ -1,10 +1,14 @@
 <script lang="ts">
 import { Prec } from '@codemirror/state'
 import { keymap } from '@codemirror/view'
+import { StopIcon as TokenIcon } from '@heroicons/vue/24/solid'
 import { type Options } from 'ink-mde'
 import { type CoreEditor, type CoreScrollable } from '#components'
 
 export default defineComponent({
+  components: {
+    TokenIcon,
+  },
   props: {
     chatId: {
       type: String,
@@ -17,7 +21,7 @@ export default defineComponent({
     const { chatMessages } = useChatMessages({ chatId })
     const systemMessage = computed(() => chatMessages.value.filter((message) => message.role === 'system').at(0))
     const nonSystemMessages = computed(() => chatMessages.value.filter((message) => message.role !== 'system'))
-    const { apiKey, chatFactory, chatModel } = useAssistant({ chatId })
+    const { apiKey, chatFactory, chatModel, languageModel, languageModels } = useAssistant({ chatId })
     const historyElement = ref<InstanceType<typeof CoreScrollable>>()
     const inputElement = ref<InstanceType<typeof CoreEditor>>()
     const input = ref('')
@@ -199,6 +203,8 @@ export default defineComponent({
       inputOptions,
       isDesktop,
       isWaiting,
+      languageModel,
+      languageModels,
       modKey,
       nonSystemMessages,
       onSend,
@@ -219,12 +225,47 @@ export default defineComponent({
         <div class="flex flex-col flex-grow gap-4 m-auto max-w-prose p-2 w-full">
           <CoreInput v-model="apiKey" :layer="1" :private="true" description="To use this feature, you need an OpenAI API key. Your API key will be stored locally on your device." label="API Key" />
           <div class="flex gap-2 items-center justify-between">
-            <div class="core-button-shape border border-layer">
-              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg"><path d="m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z" /></svg>
-              <span>GPT-4 Turbo</span>
-            </div>
-            <div class="flex gap-2 items-center">
-              <CoreButtonLink :layer="1" :to="{ path: '/assistant/conversations' }" class="flex gap-2 items-center">
+            <CoreLayer>
+              <CoreListbox v-model="languageModel" :items="languageModels">
+                <CoreListboxButton class="bg-layer">
+                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg"><path d="m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z" /></svg>
+                  <span>{{ languageModel.label }}</span>
+                </CoreListboxButton>
+                <CoreListboxOptions class="z-20 bg-layer">
+                  <div class="flex gap-0.5 items-center p-2 text-layer-muted mb-2">
+                    <TokenIcon class="sq-4" />
+                    <small>Total Context Size (in Tokens)</small>
+                  </div>
+                  <div class="grid auto-rows-auto auto-cols-auto">
+                    <CoreListboxOption
+                      v-for="model in languageModels"
+                      :id="model.id"
+                      :key="model.id"
+                      class="grid grid-cols-subgrid col-span-2 gap-4"
+                      :disabled="model.disabled"
+                      :label="model.label"
+                      :layer="1"
+                      :value="model"
+                    >
+                      <span class="flex items-center justify-start gap-2 col-start-1">
+                        <svg class="sq-5" fill="currentColor" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg"><path d="m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z" /></svg>
+                        <span>{{ model.label }}</span>
+                        <small v-if="model.comingSoon" class="text-primary border border-current rounded px-1">Coming Soon!</small>
+                      </span>
+
+                      <span class="flex items-center justify-start gap-4 col-start-2">
+                        <small class="text-xs text-layer-muted flex items-center gap-0.5">
+                          <TokenIcon class="sq-4" />
+                          {{ model.contextWindow }}
+                        </small>
+                      </span>
+                    </CoreListboxOption>
+                  </div>
+                </CoreListboxOptions>
+              </CoreListbox>
+            </CoreLayer>
+            <CoreLayer class="flex gap-2 items-center">
+              <CoreButtonLink :to="{ path: '/assistant/conversations' }" class="flex gap-2 items-center">
                 <span>History</span>
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
@@ -236,7 +277,7 @@ export default defineComponent({
                   <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
                 </svg>
               </CoreButtonLink>
-            </div>
+            </CoreLayer>
           </div>
           <div v-if="!chatMessages.length || systemMessage?.text" class="flex flex-col gap-2">
             <label class="text-center">System Instructions</label>

diff --git a/components/CoreAsset.vue b/components/CoreAsset.vue
@@ -2,9 +2,11 @@
 import {
   UserCircleIcon as Account,
   CheckIcon as CheckMark,
+  XMarkIcon as Dismiss,
   DocumentIcon as Document,
   DocumentTextIcon as DocumentWithText,
   BeakerIcon as Experimental,
+  ChatBubbleLeftRightIcon as Feedback,
   InboxIcon as Inbox,
   CloudArrowUpIcon as Save,
   MagnifyingGlassIcon as Search,
@@ -15,6 +17,9 @@ import {
   Square2StackIcon as Workspace,
   Squares2X2Icon as Workspaces,
 } from '@heroicons/vue/24/outline'
+import Logo from '#root/assets/logo-icon.svg?component'
+import GitHub from '#root/assets/github.svg?component'
+import Twitter from '#root/assets/twitter.svg?component'
 
 defineProps<{
   type: keyof typeof assets,
@@ -23,16 +28,21 @@ defineProps<{
 const assets = {
   Account,
   CheckMark,
+  Dismiss,
   Document,
   DocumentWithText,
   Experimental,
+  Feedback,
+  GitHub,
   Inbox,
+  Logo,
   Save,
   Search,
   SectionToggle,
   Settings,
   Tag,
   Trash,
+  Twitter,
   Workspace,
   Workspaces,
 }

diff --git a/components/CoreAssetDismiss.vue b/components/CoreAssetDismiss.vue
diff --git a/components/CoreAssetFeedback.vue b/components/CoreAssetFeedback.vue
diff --git a/components/CoreAssetGitHub.vue b/components/CoreAssetGitHub.vue
diff --git a/components/CoreAssetLogo.vue b/components/CoreAssetLogo.vue
diff --git a/components/CoreAssetTwitter.vue b/components/CoreAssetTwitter.vue
diff --git a/components/Tag.vue b/components/Tag.vue
@@ -2,15 +2,16 @@
 import { HashtagIcon as TagIcon } from '@heroicons/vue/24/outline'
 import { useSlots } from 'vue'
 
-const slotNodes = useSlots().default?.()
-const isOcto = slotNodes?.some((node) => {
-  return node.children === 'octo'
+const isOcto = computed(() => {
+  return useSlots().default?.().some((node) => {
+    return node.children === 'octo'
+  })
 })
 </script>
 
 <template>
   <span class="inline-flex min-w-0 items-center gap-2">
-    <CoreAssetLogo v-if="isOcto" class="sq-5" />
+    <CoreAsset v-if="isOcto" type="Logo" class="sq-5" />
     <TagIcon v-else class="w-5" />
     <span class="flex-grow flex-shrink text-ellipsis whitespace-nowrap overflow-hidden">
       <slot />

diff --git a/composables/useAssistant.ts b/composables/useAssistant.ts
@@ -50,7 +50,7 @@ export const dexieStorage = (): StorageAdapter => {
   }
 }
 
-export const useAssistant = ({ chatId }: { chatId: Ref<string> }) => {
+export const useAssistant = ({ chatId, languageModel = ref({ id: 'gpt-4-1106-preview', label: 'GPT-4 Turbo' }) }: { chatId: Ref<string>, languageModel?: Ref<{ id: string, label: string }> }) => {
   const storageAdapter = dexieStorage()
   const apiKey = useLocalStorage<string>('openAiApiKey', '', {
     initOnMounted: true,
@@ -59,13 +59,45 @@ export const useAssistant = ({ chatId }: { chatId: Ref<string> }) => {
   const storage = useStorage(storageAdapter)
   const peripherals = { logger, storage }
   const integration = computed(() => openai({ apiKey: apiKey.value, peripherals }))
-  const chatInterface = computed(() => useChat({ chatId: chatId.value, integration: integration.value, model: 'gpt-4-1106-preview', peripherals }))
+  const chatInterface = computed(() => useChat({ chatId: chatId.value, integration: integration.value, model: languageModel.value.id, peripherals }))
   const chatModel = computed(() => chatInterface.value.model)
   const chatFactory = computed(() => chatInterface.value.factory)
 
+  const languageModels = ref([
+    {
+      id: 'gpt-4-turbo-preview',
+      label: 'GPT-4 Turbo',
+      contextWindow: '128k',
+    },
+    {
+      id: 'gpt-4-vision-preview',
+      label: 'GPT-4 Turbo Vision',
+      contextWindow: '128k',
+      comingSoon: true,
+      disabled: true,
+    },
+    {
+      id: 'gpt-4',
+      label: 'GPT-4',
+      contextWindow: '8k',
+    },
+    {
+      id: 'gpt-4-32k',
+      label: 'GPT-4 (32k)',
+      contextWindow: '32k',
+    },
+    {
+      id: 'gpt-3.5-turbo-0125',
+      label: 'GPT-3.5 Turbo',
+      contextWindow: '16k',
+    },
+  ])
+
   return {
     apiKey,
     chatFactory,
     chatModel,
+    languageModel,
+    languageModels,
   }
 }
diff --git a/layouts/minimal.vue b/layouts/minimal.vue
@@ -14,7 +14,7 @@ onMounted(() => {
         <CoreContainer>
           <div class="flex items-center justify-between">
             <CoreLink :to="{ path: '/' }" class="flex gap-2 items-center p-2 -ml-2 rounded">
-              <CoreAssetLogo class="sq-8" />
+              <CoreAsset type="Logo" class="sq-8" />
               <span class="font-bold text-lg">Octo</span>
             </CoreLink>
             <div class="flex items-center gap-2 -mr-2">

diff --git a/pages/menu.vue b/pages/menu.vue
@@ -145,7 +145,7 @@ export default {
       </CoreLink>
       <CoreLink :to="linkFeedback" class="sidebar-link">
         <div class="flex gap-3 items-center">
-          <CoreAssetFeedback class="sq-5" />
+          <CoreAsset type="Feedback" class="sq-5" />
           <span>Feedback</span>
         </div>
       </CoreLink>
@@ -159,7 +159,7 @@ export default {
         </button>
       </div>
       <CoreLink v-if="experimentalFeaturesEnabled" :to="{ path: '/assistant' }" class="sidebar-link allow-link-active">
-        <CoreAssetLogo class="w-5" />
+        <CoreAsset type="Logo" class="w-5" />
         <span class="action flex flex-grow items-center justify-between ml-3">
           <span>Assistant</span>
           <BeakerIcon class="text-layer-muted w-5" />