feat: mass upgrade for nov 2023

package.json

@@ -24,6 +24,7 @@
     "@types/retry": "^0.12.2",
     "@vitest/coverage-v8": "^0.32.0",
     "@waylaidwanderer/fetch-event-source": "^3.0.1",
+    "axios": "^1.6.2",
     "crypto-js": "^4.1.1",
     "firebase": "^9.20.0",
     "firebase-tools": "^11.28.0",
@@ -32,18 +33,19 @@
     "franc": "^6.1.0",
     "gpt-tokenizer": "^2.1.1",
     "js-tiktoken": "^1.0.7",
-    "langchain": "^0.0.102",
+    "langchain": "^0.0.192",
     "lodash": "^4.17.21",
     "lru-cache": "^9.1.2",
     "markdown-it": "^13.0.1",
-    "openai": "^3.2.1",
+    "openai": "^4.0.0",
     "pinia": "^2.0.11",
     "pino": "^8.14.1",
     "prismjs": "^1.29.0",
     "quasar": "^2.6.0",
     "retry": "^0.13.1",
     "uuid": "^9.0.0",
     "vue": "^3.0.0",
+    "vue-i18n": "^9.8.0",
     "vue-router": "^4.0.0"
   },
   "devDependencies": {

quasar.config.js

@@ -40,8 +40,7 @@ module.exports = configure(function (/* ctx */) {
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
     boot: [
-
-
+      'vue-i18n',
     ],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css

src/boot/vue-i18n.ts

@@ -0,0 +1,15 @@
+import { boot } from 'quasar/wrappers'
+import { createI18n } from 'vue-i18n'
+import messages from 'src/i18n'
+
+export default boot(({ app }) => {
+  // Create I18n instance
+  const i18n = createI18n({
+    locale: 'en-US',
+    legacy: false,
+    messages
+  })
+
+  // Tell app to use the I18n instance
+  app.use(i18n)
+})

src/components/ChatComponent.vue

@@ -1,9 +1,9 @@
 <template>
 
   <q-card v-for="message in messages" :key="message.id" class="message"
-          :class="{ 'sender': message.role === 'User', 'receiver': message.sender !== 'Me' }">
+          :class="{ 'sender': message.role.toLowerCase() === 'user', 'receiver': message.sender !== 'user' }">
     <div class="sender-avatar">
-      <q-avatar v-if="message.role=='User'" :color="getAvatarColor(message.role)" :icon="matPerson">
+      <q-avatar v-if="message.role.toLowerCase()=='user'" :color="getAvatarColor(message.role)" :icon="matPerson">
 
       </q-avatar>
       <q-avatar v-else>

src/components/ChatEntry.vue

@@ -1,15 +1,21 @@
 <template>
-  <q-toolbar class="bg-grey-3 text-black row">
-    <q-btn @click="onReset" flat class="q-ml-sm" icon="refresh" color="primary"/>
-    <q-input rounded outlined dense class="WAL__field q-mr-sm" bg-color="white"
+  <div style="background-color: lightgrey">
+    <q-input rounded outlined dense autogrow class="q-mr-sm" bg-color="white"
              :model-value="modelValue"
              @update:model-value="onModelValueUpdate"
              @keydown.enter="sendMessage"
-             placeholder="Type your message"/>
-    <audio-transcriber @message="onAudioMessage"></audio-transcriber>
-    <q-btn disable round flat :icon="isVolumeOn ? matVolumeUp : matVolumeOff"/>
-    <q-btn @click="sendMessage" flat class="q-ml-sm" icon="send" color="primary"/>
-  </q-toolbar>
+             placeholder="Type your message"
+    >
+      <template v-slot:before>
+        <q-btn @click="onReset" flat class="q-ml-sm" icon="refresh" color="primary"/>
+      </template>
+      <template v-slot:append>
+        <audio-transcriber @message="onAudioMessage"></audio-transcriber>
+        <q-btn disable round flat :icon="isVolumeOn ? matVolumeUp : matVolumeOff"/>
+        <q-btn @click="sendMessage" flat class="q-ml-sm" icon="send" color="primary"/>
+      </template>
+    </q-input>
+  </div>
 </template>
 
 <script setup lang="ts">

src/components/CreateImageRequestEditor.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <q-input label="Prompt" v-model="modelValue.prompt" />
+    <q-select label="Model" v-model="modelValue.model" :options="modelOptions" />
     <q-input label="Number of Images" type="number" v-model.number="modelValue.n" />
     <q-select label="Image Size" v-model="modelValue.size" :options="sizeOptions" />
     <q-select
@@ -13,8 +14,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, defineEmits, defineProps } from 'vue';
-import { CreateImageRequest } from 'openai';
+import {ref, watch, computed} from 'vue'
+import { OpenAI } from 'openai';
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -24,16 +25,18 @@ const props = defineProps<{
 
 const defaultValues: CreateImageRequest = {
   prompt: '',
+  model: 'dall-e-3',
   n: 1,
-  size: '256x256',
+  size: '1024x1024',
   response_format: 'url',
   user: '',
 };
 
 const modelValue = ref<CreateImageRequest>(Object.assign({}, defaultValues, props.modelValue));
 
-const sizeOptions = ['256x256', '512x512', '1024x1024'] as const;
+const sizeOptions = computed(() => modelValue.value.model === 'dall-e-3' ? ['1024x1024' ,'1024x1792', '1792x1024'] : ['256x256', '512x512', '1024x1024']);
 const responseFormatOptions = ['url', 'b64_json'] as const;
+const modelOptions = ['dall-e-2', 'dall-e-3'] as const
 
 watch(
   modelValue,

src/components/LanguageSwitcher.vue

@@ -0,0 +1,34 @@
+<template>
+  <!-- ...... -->
+  <q-select
+    v-model="locale"
+    :options="localeOptions"
+    label="Language"
+    dense
+    borderless
+    emit-value
+    map-options
+    options-dense
+    style="min-width: 150px"
+  />
+  <!-- ...... -->
+</template>
+
+<script>
+import { useI18n } from 'vue-i18n'
+
+export default {
+  setup () {
+    const { locale } = useI18n({ useScope: 'global' })
+
+    return {
+      locale,
+      localeOptions: [
+        { value: 'en-US', label: 'English' },
+        { value: 'de', label: 'Deutsche' },
+        { value: 'zh-CN', label: '中文'}
+      ]
+    }
+  }
+}
+</script>

src/components/MultiFileManager.vue

@@ -1,103 +1,170 @@
 <template>
   <div>
     <q-file
-      v-model="files"
-      multiple
-      filled
-      color="teal"
-      @update:model-value="onFileChange"
-      drag-and-drop
-      :loading="loading"
-      label="Drag and drop multiple files to question here"
+        v-model="files"
+        multiple
+        filled
+        color="teal"
+        @update:model-value="onFileChange"
+        drag-and-drop
+        :loading="anyLoading"
+        :label="t('label.dragHint')"
     >
       <template v-slot:prepend>
-        <q-icon :icon="matCloudUpload" />
+        <q-icon :name="matCloudUpload"/>
       </template>
     </q-file>
 
     <q-table
-      v-if="uploadedFiles.length>0"
-      :loading="processingDocuments"
-      :rows="uploadedFiles"
-      row-key="file.name"
-      :columns="columns"
-      row-class="row-styling"
-      no-data-label="No files uploaded yet"
-    ></q-table>
+        bordered
+        selection="multiple"
+        v-model:selected="selected"
+        :loading="processingDocuments"
+        :rows="uploadedFiles"
+        row-key="fileName"
+        :columns="columns"
+        row-class="row-styling"
+        :no-data-label="t('label.noUpload')"
+        v-model:pagination="pagination"
+    >
+      <template v-slot:top>
+        <q-btn color="primary" :disable="anyLoading" label="Add row"/>
+        <q-space/>
+        <q-btn :icon="matRefresh" :disable="anyLoading" color="warning" v-if="selected.length>0" label="Reindex Selection" @click="onFilesReindex"></q-btn>
+        <q-btn :icon="matDelete" :disable="anyLoading" color="warning" v-if="selected.length>0" label="Delete Selection" @click="onFilesDelete"></q-btn>
+      </template>
+    </q-table>
   </div>
 </template>
 
 <script setup lang="ts">
-import {computed, markRaw, ref} from 'vue'
-import {createVectorStoreFromLargeContent} from 'src/lib/ai/largeDocQna'
-import {fileToText} from 'src/lib/ai/unstructured'
-import {DocumentInfo, useMultiFileStore} from 'stores/multiFileStore'
-import {matCloudUpload} from '@quasar/extras/material-icons'
-import {RecursiveCharacterTextSplitter} from "langchain/text_splitter";
-
-defineProps({
-  loading:Boolean
+import {computed, onMounted, ref} from 'vue'
+import {DocumentInfo, useMultiFileStoreAsync} from '../stores/multiFileStore'
+import {matCloudUpload, matDelete, matRefresh} from '@quasar/extras/material-icons'
+import {notify} from '../lib/notify'
+import {useI18n} from 'vue-i18n'
+const { t } = useI18n()
+
+const props = defineProps({
+  loading: Boolean
 })
 
-const files = ref<File[]>([]);
-const multiFileStore = useMultiFileStore()
-const uploadedFiles = computed(() => multiFileStore.documentInfo)
-const columns = [
+const selfLoading = ref(false)
+const anyLoading = computed(() => selfLoading.value || props.loading)
+
+const selected = ref([])
+const files = ref<File[]>([])
+const multiFileStore = ref(undefined)
+const uploadedFiles = computed(() => multiFileStore.value?.documentInfo ?? [])
+const columns = computed(() => [
   {
     name: 'File Name',
     required: true,
     align: 'left',
-    field: (row: DocumentInfo) => row.file.name,
-    label: 'Name',
+    field: (row: DocumentInfo) => row.fileName,
+    label: t('label.name'),
     sortable: true,
   },
   {
     name: 'Size (bytes)',
     align: 'left',
-    field: (row: DocumentInfo) => row.file.size,
-    label: 'Size',
+    field: (row: DocumentInfo) => row.fileSize,
+    label: t('label.size'),
     sortable: true,
   },
   {
-    name: 'Type',
+    name: 'Status',
     align: 'left',
-    field: (row: DocumentInfo) => row.file.type,
-    label: 'Type',
+    field: (row: DocumentInfo) => row.fileStatus === 'processing' ? (100 * (row.progress ?? 0.0)).toFixed(0) + '%' : row.fileStatus,
+    label: t('label.status'),
     sortable: true,
   },
   {
-    name: 'Status',
+    name: 'Last Modified',
     align: 'left',
-    field: (row: DocumentInfo) => row.status === 'processing' ? (100*(row.progress??0.0)).toFixed(0) + "%" : row.status,
-    label: 'Status',
+    field: (row: DocumentInfo) => row.fileLastModified,
+    label: t('label.lastModified'),
     sortable: true,
   },
   {
-    name: 'Last Modified',
+    name: 'Type',
     align: 'left',
-    field: (row: DocumentInfo) => row.file.lastModified,
-    label: 'Last Modified',
+    field: (row: DocumentInfo) => row.fileType,
+    label: t('label.type'),
     sortable: true,
   },
-];
+])
+
+const pagination = ref({
+  sortBy: 'name',
+  descending: false,
+  page: 1,
+  rowsPerPage: 20
+})
+
+const onFilesDelete = async () => {
+  try {
+    selfLoading.value = true
+    const ps = selected.value.map(async row => {
+      const multiFileStore = await useMultiFileStoreAsync()
+      return await multiFileStore.deleteFile(row.fileName)
+    })
+    await Promise.all(ps)
+    selected.value = []
+  } catch (e) {
+    console.log(e)
+    notify.error(e)
+  } finally {
+    selfLoading.value = false
+  }
+}
+
+const onFilesReindex = async () => {
+  try {
+    selfLoading.value = true
+    const ps = selected.value.map(async row => {
+      const multiFileStore = await useMultiFileStoreAsync()
+      return await multiFileStore.reindexFile(row.fileName)
+    })
+    await Promise.all(ps)
+    selected.value = []
+  } catch (e) {
+    console.log(e)
+    notify.error(e)
+  } finally {
+    selfLoading.value = false
+  }
+}
 
 const onFileChange = (newFiles: File[]) => {
-  newFiles.forEach(file => {
-    if (!multiFileStore.documentInfo.some(f => f.file.name === file.name)) {
-      multiFileStore.addFile(file)
-    }
-  });
+  try {
+    newFiles.forEach(file => {
+      // if (!multiFileStore.documentInfo.some(f => f.fileName === file.name)) {
+      const msg = multiFileStore.value.addFile(file)
+      // notify.success(msg)
+      // }
+    })
 
-  // Clear the files variable after populating uploadedFiles
-  files.value = [];
+    multiFileStore.value.processNextDocument()
+  } catch (e) {
+    notify.error((e as Error).message)
+  } finally {
+    // Clear the files variable after populating uploadedFiles
+    files.value = []
 
-  multiFileStore.processNextDocument()
-};
+  }
+}
 
 const processingDocuments = computed(() => {
-  return multiFileStore.processing
+  return multiFileStore.value?.processing ?? false
   // return uploadedFiles.value.some(file => includes([ 'processing', 'parsing'], file.status));
-});
+})
+
+onMounted(async () => {
+  // await fbGetUser()
+  multiFileStore.value = await useMultiFileStoreAsync()
+  await multiFileStore.value.subscribe()
+})
 
 </script>