Merge pull request #292 from davidmyersdev/assistant-improvements

davidmyersdev · web-flow · commit 07a2c5c3cb4a · 2024-05-19T10:46:55.000-04:00
Add support for Vision in GPT-4 Turbo and GPT-4o
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -313,7 +313,8 @@
     @apply bg-layer;
     @apply disabled:bg-layer-disabled ui-disabled:bg-layer-disabled;
     @apply disabled:text-layer-disabled ui-disabled:text-layer-disabled;
-    @apply disabled:cursor-default ui-disabled:cursor-default;
+    @apply disabled:hover:bg-layer-disabled;
+    @apply disabled:cursor-not-allowed ui-disabled:cursor-not-allowed disabled-within:cursor-not-allowed;
     @apply disabled-within:bg-layer-disabled disabled-within:text-layer-disabled;
     @apply disabled-within:hover:bg-layer-disabled disabled-within:hover:text-layer-disabled;
     @apply hover:bg-layer-hover ui-active:bg-layer-hover;
diff --git a/components/Assistant.vue b/components/Assistant.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { Prec } from '@codemirror/state'
 import { keymap } from '@codemirror/view'
+import { PhotoIcon as AddImagesIcon } from '@heroicons/vue/24/outline'
 import { StopIcon as TokenIcon } from '@heroicons/vue/24/solid'
 import { type Options } from 'ink-mde'
 import { nanoid } from 'nanoid'
@@ -11,6 +12,7 @@ import { type SystemInstruction, useSystemInstructions } from '#root/composables
 
 export default defineComponent({
   components: {
+    AddImagesIcon,
     TokenIcon,
   },
   props: {
@@ -22,6 +24,7 @@ export default defineComponent({
     const { id } = useId()
     const { isDesktop, modKey } = useDevice()
     const chatId = computed(() => props.chatId || id())
+    // Todo: Update types for `ChatMessage` in vellma...
     const { chatMessages } = useChatMessages({ chatId })
     const { addSystemInstruction, systemInstructions } = useSystemInstructions()
     const systemInstruction = ref<SystemInstruction>({
@@ -194,11 +197,17 @@ export default defineComponent({
         messages.push(chatFactory.value.system({ text: systemInstruction.value.text }))
       }
 
-      if (input.value) {
-        messages.push(chatFactory.value.human({ text: input.value }))
+      if (input.value || files.value.length > 0) {
+        const attachments = files.value.map((file) => ({ type: 'image', url: file.dataUrl }))
+
+        messages.push(chatFactory.value.human({
+          attachments,
+          text: input.value,
+        }))
       }
 
       input.value = ''
+      files.value = []
 
       if (!messages.length) return
 
@@ -229,18 +238,57 @@ export default defineComponent({
       })
     }
 
+    const files = ref<{ name: string, blob: File, dataUrl: string }[]>([])
+
+    const addFiles = async (event: Event) => {
+      if (event.target && 'files' in event.target && event.target.files) {
+        files.value = []
+
+        for (const blob of Array.from(event.target.files as FileList)) {
+          files.value.push({
+            blob,
+            dataUrl: await toDataUrl(blob),
+            name: blob.name,
+          })
+        }
+      }
+    }
+
+    const isAllowedToSend = computed(() => !!input.value || !!files.value.length || !!systemInstruction.value.text)
+
+    const toFileUrl = (file: File) => {
+      return URL.createObjectURL(file)
+    }
+
+    const toDataUrl = async (file: File) => {
+      const fileReader = new FileReader()
+
+      return new Promise<string>((resolve, reject) => {
+        fileReader.onload = () => {
+          resolve(fileReader.result as string)
+        }
+
+        fileReader.onerror = reject
+
+        fileReader.readAsDataURL(file)
+      })
+    }
+
     return {
       CoreDivider,
       CoreLink,
+      addFiles,
       apiKey,
       chatMessages,
       choosePrompt,
       clearSystemInstruction,
       examplePrompts,
+      files,
       historyElement,
       input,
       inputElement,
       inputOptions,
+      isAllowedToSend,
       isDesktop,
       isToBeSaved,
       isWaiting,
@@ -255,6 +303,7 @@ export default defineComponent({
       systemInstruction,
       systemInstructions,
       systemMessage,
+      toFileUrl,
       tryAgain,
     }
   },
@@ -358,10 +407,13 @@ export default defineComponent({
           </CoreLayer>
           <div v-if="!chatMessages.length || systemMessage?.text" class="flex flex-col gap-2">
             <div class="flex flex-col gap-2">
-              <label v-if="!systemInstruction.id && !chatMessages.length" class="flex items-center cursor-pointer gap-2">
-                <input v-model="isToBeSaved" type="checkbox" class="checkbox">
-                <span>Save Instructions</span>
-              </label>
+              <div>
+                <CoreSwitch
+                  v-if="!systemInstruction.id && !chatMessages.length"
+                  v-model="isToBeSaved"
+                  label="Save Instructions"
+                />
+              </div>
               <CoreInput
                 v-if="isToBeSaved || systemInstruction.id"
                 v-model="systemInstruction.description"
@@ -384,7 +436,14 @@ export default defineComponent({
             </div>
           </div>
           <template v-if="chatMessages.length">
-            <AssistantChatMessage v-for="message in nonSystemMessages" :key="message.id" :created-at="message.createdAt" :role="message.role" :text="message.text" />
+            <AssistantChatMessage
+              v-for="message in nonSystemMessages"
+              :key="message.id"
+              :created-at="message.createdAt"
+              :role="message.role"
+              :text="message.text"
+              :attachments="message.attachments"
+            />
             <div class="h-4" />
           </template>
           <div v-else class="flex flex-col flex-grow gap-4 justify-end">
@@ -410,9 +469,11 @@ export default defineComponent({
           </div>
         </div>
       </CoreScrollable>
-      <CoreButton v-if="showBackToTop" :layer="1" class="absolute p-2 right-4 bottom-4" @click="scrollToTop">
-        <AssetArrowUp class="w-4" />
-      </CoreButton>
+      <CoreLayer class="absolute right-4 bottom-4">
+        <CoreButton v-if="showBackToTop" class="p-2 bg-layer" @click="scrollToTop">
+          <AssetArrowUp class="w-4" />
+        </CoreButton>
+      </CoreLayer>
     </div>
     <CoreLayer as="section" class="bg-layer">
       <CoreDivider />
@@ -424,24 +485,35 @@ export default defineComponent({
           <CoreScrollable class="bg-layer rounded max-h-[40vh]">
             <div class="flex gap-2">
               <CoreEditor ref="inputElement" v-model="input" :layer="0" :options="inputOptions" />
-              <CoreLayer v-if="apiKey">
-                <CoreButton v-if="showTryAgainMessage" class="m-1 self-start sticky top-1" @click="tryAgain">
+              <CoreLayer v-if="apiKey" class="m-1 self-start sticky top-1">
+                <CoreButton v-if="showTryAgainMessage" @click="tryAgain">
                   Try again
                 </CoreButton>
-                <CoreButton v-else :disabled="isWaiting || (!input && !systemInstruction.text)" class="m-1 self-start sticky top-1" @click="onSend">
-                  <span v-if="isWaiting">
-                    Waiting for a reply...
-                  </span>
-                  <span v-else class="flex items-center gap-2">
-                    <span>Send</span>
-                    <span v-if="isDesktop" class="hidden md:flex text-layer-muted text-opacity-[inherit]">
-                      <Key>{{ modKey }}</Key>
-                      <Key>⏎</Key>
+                <div v-else class="flex gap-1">
+                  <CoreButton :disabled="isWaiting || !isAllowedToSend" @click="onSend">
+                    <span v-if="isWaiting">
+                      Waiting for a reply...
                     </span>
-                  </span>
-                </CoreButton>
+                    <span v-else class="flex items-center gap-2">
+                      <span>Send</span>
+                      <span v-if="isDesktop" class="hidden md:flex text-layer-muted text-opacity-[inherit]">
+                        <Key>{{ modKey }}</Key>
+                        <Key>⏎</Key>
+                      </span>
+                    </span>
+                  </CoreButton>
+                  <CoreButton as="label" title="Attach images">
+                    <AddImagesIcon class="sq-5" />
+                    <input class="hidden" type="file" accept="image/*" multiple @change="addFiles">
+                  </CoreButton>
+                </div>
               </CoreLayer>
             </div>
+            <div v-if="files.length" class="flex flex-wrap gap-1 p-1">
+              <div v-for="file in files" :key="file.name" class="relative border border-layer flex items-center justify-center sq-12 rounded overflow-hidden">
+                <img class="h-min w-min object-cover" :src="file.dataUrl" :alt="file.name" :title="file.name">
+              </div>
+            </div>
           </CoreScrollable>
         </CoreLayer>
       </div>
diff --git a/components/AssistantChatMessage.vue b/components/AssistantChatMessage.vue
@@ -3,7 +3,7 @@ import { ClipboardIcon } from '@heroicons/vue/24/outline'
 import { readonly } from '#root/src/vendor/plugins/readonly'
 import { useVue } from '#shared/composables'
 
-const props = defineProps<{ createdAt: Date, role: string, text: string }>()
+const props = defineProps<{ createdAt: Date, role: string, text: string, attachments?: { url: string }[] }>()
 
 const { copy } = useClipboard()
 const { addToast } = useToasts()
@@ -47,9 +47,12 @@ const copyMessage = async () => {
       <label class="bg-layer bg-opacity-75 block m-1 px-1 rounded sticky top-1 z-10" :class="{ 'self-end': isHuman, 'self-start': isAssistant }">
         <small>{{ name }}</small>
       </label>
-      <div class="flex items-start">
-        <CoreLayer>
-          <CoreEditor v-if="isMounted" :model-value="text" :options="options" class="bg-layer" />
+      <div class="flex items-start" :class="{ 'justify-end': isHuman, 'justify-start': isAssistant }">
+        <CoreLayer class="bg-layer rounded">
+          <CoreEditor v-if="isMounted && text" :model-value="text" :options="options" />
+          <div v-if="attachments?.length" class="flex p-2" :class="{ 'justify-end': isHuman, 'justify-start': isAssistant }">
+            <img v-for="attachment in attachments" :key="attachment.url" class="max-h-24 rounded" :src="attachment.url">
+          </div>
         </CoreLayer>
       </div>
     </div>
diff --git a/components/CoreSwitch.vue b/components/CoreSwitch.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { Switch } from '@headlessui/vue'
+
+defineProps<{
+  description?: string,
+  label?: string,
+}>()
+
+const modelValue = defineModel<boolean>()
+</script>
+
+<template>
+  <div>
+    <label class="inline-flex items-center gap-2 cursor-pointer">
+      <Switch
+        v-model="modelValue"
+        :class="modelValue ? 'bg-primary' : 'bg-layer'"
+        class="inline-flex relative h-5 items-stretch justify-stretch shrink-0 grow-0 cursor-pointer rounded border border-layer transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2"
+      >
+        <span class="sr-only">Toggle</span>
+        <span aria-hidden="true" class="pointer-events-none inline-flex aspect-[2/1] overflow-hidden">
+          <span
+            class="
+              relative
+              font-bold text-[0.4rem] leading-none
+              inline-flex items-center gap-0
+              border-2 border-transparent
+              aspect-square w-1/2
+              transform-gpu transition duration-200 ease-in-out
+            "
+            :class="{
+              'translate-x-[100%]': modelValue,
+              'translate-x-0': !modelValue,
+            }"
+          >
+            <span class="absolute block right-full mr-1">ON</span>
+            <span
+              class="relative bg-current block rounded-sm h-full w-full"
+            />
+            <span class="absolute block left-full ml-1">OFF</span>
+          </span>
+        </span>
+      </Switch>
+      <span v-if="label">{{ label }}</span>
+    </label>
+    <small v-if="description" class="block text-layer-muted">{{ description }}</small>
+  </div>
+</template>
diff --git a/components/Key.vue b/components/Key.vue
@@ -1,9 +1,3 @@
-<template>
-  <small class="key hidden md:flex justify-center rounded-sm uppercase leading-none text-xs p-1">
-    <slot></slot>
-  </small>
-</template>
-
 <script>
 export default {
   props: {
@@ -15,3 +9,9 @@ export default {
   },
 }
 </script>
+
+<template>
+  <small class="key hidden md:flex justify-center rounded-sm uppercase leading-none text-xs p-0.5">
+    <slot />
+  </small>
+</template>
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
     "overlayscrollbars": "^2.4.6",
     "pinia": "^2.1.7",
     "remarkable": "^2.0.1",
-    "vellma": "^0.7.0",
+    "vellma": "^0.8.1",
     "vue3-mq": "^3.1.3",
     "vuex": "^4.1.0"
   },
diff --git a/pages/dev/design-system/index.vue b/pages/dev/design-system/index.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import { DesignSystemColors } from '~/lib/components'
 </script>
 
 <template>
   <div class="flex flex-col gap-4 p-4">
-    <DesignSystemColors />
+    <CoreSwitch />
   </div>
 </template>
diff --git a/pages/dev/design-system/themes/index.vue b/pages/dev/design-system/themes/index.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { DesignSystemColors } from '~/lib/components'
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <DesignSystemColors />
+  </div>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
