Merge pull request #20 from rti/bug/nodejs18_dockerfile

Bug/nodejs18 dockerfile
rti · Jan 31, 2024 · 6e3c789 · 6e3c789
2 parents aea16e3 + 86cbf68
commit 6e3c789
Show file tree

Hide file tree

Showing 9 changed files with 213 additions and 45 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -49,14 +49,23 @@ COPY --chmod=644 gswikichat gswikichat
 COPY --chmod=755 static static
 COPY --chmod=755 json_input json_input
 
-# # Install node from upstream, ubuntu packages are too old
-# RUN curl -sL https://deb.nodesource.com/setup_20.x | bash
-# RUN apt-get install -y nodejs && \
-#     apt-get clean && \
-#     rm -rf /var/lib/apt/lists/*
-
-# # Install node package manager yarn 
-# RUN npm install -g yarn
+
+# Install node from upstream, ubuntu packages are too old
+RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
+
+RUN curl -sL https://deb.nodesource.com/setup_20.x | bash
+RUN apt-get install -y nodejs && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/*
+
+RUN npm cache clean -f
+RUN npm install -g n
+RUN n 18.17.1
+
+# RUN node -v
+
+# Install node package manager yarn 
+RUN npm install -g yarn
 
 # # Install frontend dependencies and build it for production (into the frontend/dist folder)
 # RUN cd frontend && yarn install && yarn build

diff --git a/frontend/package.json b/frontend/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "vue": "^3.3.11",
+    "vue-i18n": "9",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {

diff --git a/frontend/src/components/field/FieldAnswer.vue b/frontend/src/components/field/FieldAnswer.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="flex space-x-6 text-light-text dark:text-dark-text">
+    <div class="p-2 text-2xl rounded-full bg-light-menu dark:bg-dark-menu h-min elem-shadow-sm">
+      <Icon icon="ooui:logo-wikimedia" />
+    </div>
+    <div v-if="response && response.sources">
+      <div v-for="s in response.sources" :key="s.id">
+        <div v-if="s.score > 2" class="mb-2">
+          <details
+            class="pt-2 text-sm cursor-pointer text-light-distinct-text dark:text-dark-distinct-text"
+          >
+            <summary>
+              {{ $t('source') }} ({{ s.score.toFixed(1) }}/5):
+              <a class="link-text" :href="s.src">{{ s.src }}</a>
+            </summary>
+            <p class="pt-2 pl-4">{{ s.content }}</p>
+          </details>
+        </div>
+      </div>
+      <div v-if="response" class="text-lg">
+        {{ response.answer }}
+      </div>
+    </div>
+    <div v-else class="text-lg">
+      {{ $t('no-response-message') }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import type { ResponseObject } from '../../types/response-object.d.ts'
+
+defineProps<{
+  response?: ResponseObject
+}>()
+</script>
diff --git a/frontend/src/components/field/FieldQuestion.vue b/frontend/src/components/field/FieldQuestion.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="flex space-x-6 text-light-text dark:text-dark-text">
+    <div class="p-1 text-3xl rounded-full bg-light-menu dark:bg-dark-menu h-min elem-shadow-sm">
+      <Icon icon="fluent:person-24-filled" />
+    </div>
+    <div>
+      <div class="text-lg">{{ text }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
+defineProps<{
+  text: string
+}>()
+</script>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -1,11 +1,36 @@
 import './assets/tailwind.css'
 
 import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
 import App from './App.vue'
 import router from './router'
 
+const i18n = createI18n({
+  locale: window.navigator.language,
+  fallbackLocale: 'de',
+  messages: {
+    en: {
+      'chat-prompt': 'Message ChatGSWiki...',
+      'check-linked-wiki-pages-notice':
+        'Please check the linked source to make sure that the information provided is correct.',
+      'no-response-message':
+        'Sorry, but no valid response was returned for your question. Please try rephrasing it.',
+      source: 'Source'
+    },
+    de: {
+      'chat-prompt': 'Schreib ChatGSWiki...',
+      'check-linked-wiki-pages-notice':
+        'Bitte überprüfen Sie die verlinkten Quellen, um sicherzustellen, dass die bereitgestellten Informationen korrekt sind.',
+      'no-response-message':
+        'Leider wurde auf Ihre Frage keine gültige Antwort zurückgegeben. Bitte versuchen Sie es umzuformulieren.',
+      source: 'Quelle'
+    }
+  }
+})
+
 const app = createApp(App)
 
+app.use(i18n)
 app.use(router)
 
 app.mount('#app')
diff --git a/frontend/src/types/response-object.d.ts b/frontend/src/types/response-object.d.ts
@@ -0,0 +1,6 @@
+import type { Source } from './source.js'
+
+export interface ResponseObject {
+  answer: string
+  sources?: Source[]
+}
diff --git a/frontend/src/types/source.d.ts b/frontend/src/types/source.d.ts
@@ -0,0 +1,6 @@
+export type Source = {
+  id: number
+  src: string
+  content: string
+  score: number
+}
diff --git a/frontend/src/views/ChatView.vue b/frontend/src/views/ChatView.vue
@@ -1,43 +1,50 @@
 <template>
-  <main class="h-screen bg-light-content dark:bg-dark-content">
-    <div class="p-6 space-y-5">
-      <h1 class="flex space-x-3 text-3xl text-light-text dark:text-dark-text font-display">
+  <main class="w-screen h-screen bg-light-content dark:bg-dark-content">
+    <div class="py-8 space-y-8">
+      <h1
+        class="flex justify-center space-x-3 text-4xl md:text-5xl text-light-text dark:text-dark-text font-display"
+      >
         <Icon icon="ooui:logo-wikimedia" />
-        <p class="-mt-[0.1em]">ChatGSWiki</p>
+        <p class="-mt-[0.025em] md:mt-0">ChatGSWiki</p>
       </h1>
-      <div>
-        <div
-          class="relative flex w-2/3 text-xl rounded-md bg-light-menu dark:bg-dark-menu elem-shadow-sm"
-        >
-          <input
-            v-model="inputText"
-            type="text"
-            class="w-full pl-3 bg-transparent rounded-md h-9 placeholder:text-light-distinct-text dark:placeholder:text-dark-distinct-text text-light-text dark:text-dark-text"
-            placeholder="Message ChatGSWiki..."
-            autocomplete="off"
-            @keyup.enter="inputText.length > 0 ? search() : {}"
-            @focus="inputFocused = true"
-            @blur="inputFocused = false"
-          />
-          <Icon
-            class="absolute -translate-y-1/2 right-2 top-1/2"
-            :class="{
-              'text-light-text dark:text-dark-text ': inputFocused && inputText.length === 0,
-              'text-light-text dark:text-dark-text hover:text-light-distinct-text dark:hover:text-dark-distinct-text hover:cursor-pointer':
-                inputFocused && inputText.length > 0,
-              'text-light-distinct-text dark:text-dark-distinct-text': !inputFocused
-            }"
-            icon="fluent:send-24-filled"
-            size="2em"
-            @click="inputText.length > 0 ? search() : {}"
-          />
+      <div class="flex justify-center w-full">
+        <div class="flex-col w-[90%] md:w-4/5 lg:w-2/3">
+          <div
+            class="relative flex text-2xl rounded-lg bg-light-menu dark:bg-dark-menu elem-shadow-sm"
+          >
+            <input
+              v-model="inputText"
+              type="text"
+              class="w-full pl-4 bg-transparent rounded-lg h-11 placeholder:text-light-distinct-text dark:placeholder:text-dark-distinct-text text-light-text dark:text-dark-text"
+              :placeholder="$t('chat-prompt')"
+              autocomplete="off"
+              @keyup.enter="inputText.length > 0 ? search() : {}"
+              @focus="inputFocused = true"
+              @blur="inputFocused = false"
+            />
+            <Icon
+              class="absolute -translate-y-1/2 right-3 top-1/2"
+              :class="{
+                'text-light-text dark:text-dark-text ': inputFocused && inputText.length === 0,
+                'text-light-text dark:text-dark-text hover:text-light-distinct-text dark:hover:text-dark-distinct-text hover:cursor-pointer':
+                  inputFocused && inputText.length > 0,
+                'text-light-distinct-text dark:text-dark-distinct-text': !inputFocused
+              }"
+              icon="fluent:send-24-filled"
+              size="2em"
+              @click="inputText.length > 0 ? search() : {}"
+            />
+          </div>
+          <p class="pt-2 pl-4 text-sm text-light-distinct-text dark:text-dark-distinct-text">
+            {{ $t('check-linked-wiki-pages-notice') }}
+          </p>
         </div>
-        <p class="pt-2 pl-3 text-sm text-light-distinct-text dark:text-dark-distinct-text">
-          Please check the linked wiki page to make sure that the information provided is correct.
-        </p>
       </div>
-      <div v-if="responseText" class="w-2/3 pl-3 results text-light-text dark:text-dark-text">
-        {{ responseText }}
+      <div v-if="response" class="flex justify-center w-full">
+        <div class="flex-col w-[90%] md:w-4/5 lg:w-2/3 space-y-5">
+          <!-- <FieldQuestion :text="inputText" /> -->
+          <FieldAnswer :response="response" />
+        </div>
       </div>
     </div>
   </main>
@@ -46,16 +53,45 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 import { ref } from 'vue'
+import FieldAnswer from '../components/field/FieldAnswer.vue'
+import type { ResponseObject } from '../types/response-object.d.ts'
 
 const inputText = ref('')
-const responseText = ref('')
+const response = ref<ResponseObject>()
 const inputFocused = ref(false)
 
+// response.value = {
+//   answer:
+//     'Confidential information should not be used or disclosed except as necessary for performance under the agreement.',
+//   sources: [
+//     {
+//       id: 1,
+//       src: 'https://example.com/document1',
+//       content:
+//         'Parties agree that Confidential Information shall not be used or disclosed except as necessary for performance hereunder.',
+//       score: 4.975016137070867
+//     },
+//     {
+//       id: 2,
+//       src: 'https://example.com/document12',
+//       content: 'Any waiver of compliance with any provision of this Agreement must be in writing.',
+//       score: 2.1152231308302407
+//     },
+//     {
+//       id: 3,
+//       src: 'https://example.com/document19',
+//       content:
+//         'This Agreement shall be governed by and construed in accordance with the laws of the State of New York.',
+//       score: 1.8400423245643809
+//     }
+//   ]
+// }
+
 function search() {
   fetch(`/api?q=${inputText.value}`)
     .then((response) => response.json())
     .then((data) => {
-      responseText.value = data
+      response.value = data
     })
 }
 </script>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -217,6 +217,27 @@
   dependencies:
     "@iconify/types" "^2.0.0"
 
+"@intlify/core-base@9.9.0":
+  version "9.9.0"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.9.0.tgz#edc55a5e3dbbf8dbbbf656529ed27832c4c4f522"
+  integrity sha512-C7UXPymDIOlMGSNjAhNLtKgzITc/8BjINK5gNKXg8GiWCTwL6n3MWr55czksxn8RM5wTMz0qcLOFT+adtaVQaA==
+  dependencies:
+    "@intlify/message-compiler" "9.9.0"
+    "@intlify/shared" "9.9.0"
+
+"@intlify/message-compiler@9.9.0":
+  version "9.9.0"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.9.0.tgz#7952759329e7af0388afbce7a984820bbeff82eb"
+  integrity sha512-yDU/jdUm9KuhEzYfS+wuyja209yXgdl1XFhMlKtXEgSFTxz4COZQCRXXbbH8JrAjMsaJ7bdoPSLsKlY6mXG2iA==
+  dependencies:
+    "@intlify/shared" "9.9.0"
+    source-map-js "^1.0.2"
+
+"@intlify/shared@9.9.0":
+  version "9.9.0"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.9.0.tgz#56907633c0f7b2d50f53269d31e88e7b24d39187"
+  integrity sha512-1ECUyAHRrzOJbOizyGufYP2yukqGrWXtkmTu4PcswVnWbkcjzk3YQGmJ0bLkM7JZ0ZYAaohLGdYvBYnTOGYJ9g==
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
@@ -2193,6 +2214,15 @@ vue-eslint-parser@^9.3.1, vue-eslint-parser@^9.4.0:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-i18n@9:
+  version "9.9.0"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.9.0.tgz#20d348fa7e37fc88e4c84f69781b2f1215c7769f"
+  integrity sha512-xQ5SxszUAqK5n84N+uUyHH/PiQl9xZ24FOxyAaNonmOQgXeN+rD9z/6DStOpOxNFQn4Cgcquot05gZc+CdOujA==
+  dependencies:
+    "@intlify/core-base" "9.9.0"
+    "@intlify/shared" "9.9.0"
+    "@vue/devtools-api" "^6.5.0"
+
 vue-router@^4.2.5:
   version "4.2.5"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.5.tgz#b9e3e08f1bd9ea363fdd173032620bc50cf0e98a"