Make TS happy

frontend/dev-mode/src/components/ChatPrompt.vue

@@ -1,33 +1,40 @@
 <script setup lang="ts">
 import { vIntersectionObserver } from '@vueuse/components'
 import { useResizeObserver, type RemovableRef } from '@vueuse/core'
-import { ref, onMounted, inject } from 'vue'
+import { ref, onMounted, inject, type Ref } from 'vue'
 
 import SettingsModal from './SettingsModal.vue'
 
 import LoadingState from '@/components/LoadingState.vue'
-import StatsValues from '@/components/StatsValues.vue'
+import StatsValues, { type Stats } from '@/components/StatsValues.vue'
 import CopyTextButton from '@/components/ui/CopyTextButton.vue'
 import MarkdownContent from '@/components/ui/MarkdownContent.vue'
 import Textarea from '@/components/ui/Textarea.vue'
-import { type Session, type Parameters } from '@/composables/useLlama'
+import {
+  type Session,
+  type Parameters,
+  DEFAULT_SESSION,
+  DEFAULT_PARAMS_VALUES,
+  type TranscriptMessage
+} from '@/composables/useLlama'
 
 const message = ref('')
 const shouldAutoScroll = ref(true)
 const resultsContainer = ref(null)
-const messageInput = ref(null)
+const messageInput = ref<{ inputRef: HTMLInputElement } | null>(null)
 const isSettingsModalOpen = ref(false)
 
-const parameters = inject<RemovableRef<Parameters>>('parameters', {})
+const parameters = inject<RemovableRef<Parameters>>('parameters', ref(DEFAULT_PARAMS_VALUES))
 
-const session = inject<Ref<Session>>('session', {})
-const stats = inject('stats', {})
+const session = inject<Ref<Session>>('session', ref(DEFAULT_SESSION))
+const stats = inject('stats', {} as Stats)
 const isGenerating = inject('isGenerating', false)
 const isPending = inject('isPending', false)
 const isChatStarted = inject('isChatStarted', false)
-const runChat = inject('runChat', null)
-const runCompletion = inject('runCompletion', null)
-const stop = inject('stop', false)
+const runChat = inject('runChat', (message: string) => message)
+const runCompletion = inject('runCompletion', () => {})
+const stop = inject('stop', () => {})
+const uploadImage = inject('uploadImage', () => {})
 
 const send = (customMessage: string = '') => {
   if (!message.value && !customMessage) {
@@ -57,7 +64,7 @@ const joinResponse = (response: TranscriptMessage[]) => {
   }
 
   // Completion mode
-  if (!session.value.type === 'completion') {
+  if (session.value.type === 'completion') {
     return response.flatMap(({ content }) => content).join('')
   }
 
@@ -149,7 +156,7 @@ useResizeObserver(resultsContainer, () => {
         v-intersection-observer="updateAutoScrollFlag"></div>
     </template>
 
-    <div v-else class="flex flex-col justify-center min-h-full">
+    <div v-else class="flex flex-col justify-center min-h-[calc(100%-20px)]">
       <h2 class="text-2xl">Start a chat</h2>
       <div class="grid grid-cols-3 items-start justify-between gap-8 mt-4">
         <button @click="send('What are you primarily designed to assist with, and what types of tasks do you perform best?')"
@@ -168,7 +175,7 @@ useResizeObserver(resultsContainer, () => {
     </div>
   </div>
 
-  <form @submit.prevent="(e) => isGenerating ? stop(e) : send(e)"
+  <form @submit.prevent="isGenerating ? stop : send"
     class="flex gap-6 w-full"
     :class="{
       'mb-[28px]': !stats

frontend/dev-mode/src/components/InputCodeSnippets.vue

@@ -3,14 +3,14 @@ import { inject, ref, computed, type Ref } from 'vue'
 
 import CodeHighlighter from './ui/CodeHighlighter.vue'
 
-import { type Session, type Parameters } from '@/composables/useLlama'
+import { type Session, type Parameters, DEFAULT_SESSION, DEFAULT_PARAMS_VALUES } from '@/composables/useLlama'
 import { apiUrl } from '@/services/completion'
 
 const lang = ref<'python'|'node'|'sh'>('python')
 
-const currentModel = inject('currentModel', '')
-const session = inject<Ref<Session>>('session', {})
-const parameters = inject<Ref<Parameters>>('parameters', {})
+const currentModel = inject<Ref<string>>('currentModel', ref(''))
+const session = inject<Ref<Session>>('session', ref(DEFAULT_SESSION))
+const parameters = inject<Ref<Parameters>>('parameters', ref(DEFAULT_PARAMS_VALUES))
 
 const pythonSnippet = computed(() => `import openai
 
@@ -23,7 +23,7 @@ client = openai.OpenAI(
 completion = client.chat.completions.create(
   model="${currentModel.value}",
   messages=[
-    {"role": "system", "content": "${session.value.prompt}"},${
+    { "role": "system", "content": "${session.value.prompt}" },${
       (session.value.transcript as Array<any>).map(([role, [entry]]) => {
         if (role.toLowerCase() === '{{user}}') {
           return `\n    { "role": "user", "content": "${entry.content}" }`

frontend/dev-mode/src/components/ResponseCode.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { inject } from 'vue'
-const session = inject('session', {})
+
+import { DEFAULT_SESSION } from '@/composables/useLlama'
+const session = inject('session', DEFAULT_SESSION)
 </script>
 
 <template>

frontend/dev-mode/src/components/SettingsModal.vue

@@ -10,6 +10,7 @@ import Slider from '@/components/ui/Slider.vue'
 import Textarea from '@/components/ui/Textarea.vue'
 import Toggle from '@/components/ui/Toggle.vue'
 import { DEFAULT_PARAMS_VALUES, DEFAULT_SESSION, type Session, type Parameters } from '@/composables/useLlama'
+import { SchemaConverter } from '@/services/json-schema-to-grammar'
 
 const props = defineProps<{
   session: Session,

frontend/dev-mode/src/components/ui/CodeHighlighter.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
   class?: ClassProp
 }>()
 
-const codeRef = ref(null)
+const codeRef = ref<HTMLDivElement | null>(null)
 
 const { copy, copied } = useClipboard()
 

frontend/dev-mode/src/composables/useLlama.ts

@@ -1,4 +1,4 @@
-import { type Ref, computed, ref, type MaybeRef } from 'vue'
+import { type Ref, computed, ref, type MaybeRef, unref } from 'vue'
 
 import { llama } from '@/services/completion'
 
@@ -22,15 +22,6 @@ export type CompletionTranscript = [string, string | TranscriptMessage]
 
 export type Transcript = ChatTranscript[] | CompletionTranscript[]
 
-type StreamResponse  = {
-  data: {
-    content: string,
-    multimodal: boolean,
-    slot_id: number,
-    stop: boolean
-  }
-}
-
 export type Session = {
   prompt: string,
   template: string,
@@ -40,7 +31,7 @@ export type Session = {
   char: string,
   user: string,
   image_selected: string,
-  response: StreamResponse[]
+  response: TranscriptMessage[]
 }
 
 export type Parameters = {
@@ -92,7 +83,7 @@ export const DEFAULT_SESSION: Session = {
   char: 'Llama',
   user: 'User',
   image_selected: '',
-  response: []
+  response: [] as TranscriptMessage[]
 }
 
 export const DEFAULT_PARAMS_VALUES = {
@@ -121,11 +112,12 @@ export const DEFAULT_PARAMS_VALUES = {
 } as Parameters
 
 // eslint-disable-next-line vue/max-len
-export default function useLlama(params?: MaybeRef<Parameters>, localSession?: Session):LlamaComposableResponse {
+export default function useLlama(parameters?: MaybeRef<Parameters>, localSession?: Session):LlamaComposableResponse {
   const stats = ref(null)
   const controller = ref<AbortController | null>(null)
+  const params = unref(parameters)
 
-  const session: Session = ref({
+  const session = ref<Session>({
     ...DEFAULT_SESSION,
     ...localSession
   })
@@ -177,7 +169,7 @@ export default function useLlama(params?: MaybeRef<Parameters>, localSession?: S
         }
       }
 
-      session.value.response.push(currentMessages)
+      session.value.response.push(...currentMessages)
     } catch (e) {
       if (!(e instanceof DOMException) || e.name !== 'AbortError') {
         console.error(e)
@@ -194,7 +186,9 @@ export default function useLlama(params?: MaybeRef<Parameters>, localSession?: S
       settings = { ...settings, ...extraSettings }
     }
     return String(str)
-      .replaceAll(/\{\{(.*?)\}\}/g, (_, key: Exclude<keyof Session, 'transcript'>) => template(settings[key]))
+      .replaceAll(
+        /\{\{(.*?)\}\}/g, (_, key: Exclude<keyof Session, 'transcript' | 'response'>) => template(settings[key])
+      )
   }
 
   const chat = async (message: string): Promise<void> => {
@@ -227,7 +221,7 @@ export default function useLlama(params?: MaybeRef<Parameters>, localSession?: S
     }
 
     await runLlama(prompt, {
-      ...(params?.value || params),
+      ...params,
       stop: ['</s>', template('{{char}}:'), template('{{user}}:'), '<|im_end|>'],
     }, '{{char}}')
   }
@@ -242,7 +236,7 @@ export default function useLlama(params?: MaybeRef<Parameters>, localSession?: S
     session.value.transcript = [...session.value.transcript, ['', prompt]] as Transcript
 
     runLlama(prompt, {
-        ...(params?.value || params),
+        ...params,
         stop: ['<|im_end|>'],
       }, '')
       .finally(() => {

frontend/dev-mode/src/services/completion.ts

@@ -42,7 +42,8 @@ const paramDefaults: ParamDefaults = {
   stop: ['</s>']
 }
 
-export const apiUrl = location.pathname.replace(/\/+$/, '')
+export const apiUrl = 'http://localhost:64246'
+// export const apiUrl = location.pathname.replace(/\/+$/, '')
 
 let generation_settings: any = null