Dia 3 - Octubre 2024

Author: paulmelero

04-frameworks/03-vue/Dia_3/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

04-frameworks/03-vue/Dia_3/.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#fa368b",
+    "activityBar.background": "#fa368b",
+    "activityBar.foreground": "#e7e7e7",
+    "activityBar.inactiveForeground": "#e7e7e799",
+    "activityBarBadge.background": "#2a5d02",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "commandCenter.border": "#e7e7e799",
+    "sash.hoverBorder": "#fa368b",
+    "statusBar.background": "#f7066e",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#fa368b",
+    "statusBarItem.remoteBackground": "#f7066e",
+    "statusBarItem.remoteForeground": "#e7e7e7",
+    "titleBar.activeBackground": "#f7066e",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#f7066e99",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  },
+  "peacock.color": "#f7066e"
+}

04-frameworks/03-vue/Dia_3/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

04-frameworks/03-vue/Dia_3/components/Chat/ChatAvatar.test.ts

@@ -0,0 +1,27 @@
+import { expect, test, describe } from 'vitest';
+import { render } from '@testing-library/vue';
+
+import ChatAvatar from './ChatAvatar.vue';
+import type { ChatUsers } from '~/types';
+
+describe('ChatAvatar', () => {
+  const renderComponent = ({ sender }: { sender: 'user' | 'ai' }) => {
+    const component = render(ChatAvatar, {
+      props: { sender },
+    });
+
+    return component;
+  };
+
+  test.each([
+    [{ sender: 'user' as ChatUsers }, 'User icon'],
+    [{ sender: 'ai' as ChatUsers }, 'Ollama logo'],
+  ])(
+    'ChatAvatar renders the correct icon when the sender %s',
+    ({ sender }, expectedLabel) => {
+      const component = renderComponent({ sender });
+
+      expect(component.findByLabelText(expectedLabel)).toBeTruthy();
+    }
+  );
+});

04-frameworks/03-vue/Dia_3/components/Chat/ChatAvatar.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <ChatOllamaIcon aria-label="Ollama logo" class="size-16 p-2 flex-shrink-0  rounded-full bg-green-400"
+      v-if="sender === 'ai'" />
+    <ChatUserIcon aria-label="User icon" class="size-16 p-2  flex-shrink-0 rounded-full bg-gray-400"
+      v-if="sender === 'user'" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ChatRecord } from '~/types';
+
+defineProps<{
+  sender: ChatRecord['sender'];
+}>();
+</script>

04-frameworks/03-vue/Dia_3/components/Chat/ChatMessage.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="flex gap-3 justify-between">
+    <div class="grid gap-3 w-full grid-cols-[auto_1fr]">
+      <ChatAvatar :sender="record.sender" />
+
+      <div class="prose prose-invert lg:prose-xl max-w-full has-[:only-child]:content-center"
+        v-html="formattedMessage.html" />
+    </div>
+
+    <time class="text-sm text-slate-400">{{ formattedTime }}</time>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ChatRecord } from '~/types';
+
+const props = defineProps<{
+  record: ChatRecord;
+}>();
+
+const { parse } = useMarkdown();
+
+const formattedMessage = computed(() => {
+  return parse(props.record.message);
+});
+
+const formattedTime = computed(() => {
+  const date = new Date(props.record.timestamp);
+
+  return new Intl.DateTimeFormat('es', {
+    hour: 'numeric',
+    minute: 'numeric',
+  }).format(date);
+});
+
+
+</script>

04-frameworks/03-vue/Dia_3/components/Chat/ChatOllamaIcon.vue

@@ -0,0 +1,3 @@
+<template>
+  <img src="/ollama.png" class="block object-contain" alt="ollama logo" />
+</template>

04-frameworks/03-vue/Dia_3/components/Chat/ChatUserIcon.test.ts

@@ -0,0 +1,14 @@
+import { expect, test } from 'vitest';
+import { render } from '@testing-library/vue';
+
+import ChatUserIcon from './ChatUserIcon.vue';
+
+test('ChatUserIcon has the expected structure', () => {
+  const component = render(ChatUserIcon);
+
+  expect(component.html()).toMatchInlineSnapshot(`
+    "<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+      <path d="M843.283 870.116c-8.439-140.516-104.296-257.423-233.908-297.15C687.88 536.273 742.4 456.533 742.4 364.089c0-127.242-103.159-230.4-230.4-230.4s-230.4 103.158-230.4 230.4c0 92.444 54.519 172.184 133.12 208.877-129.612 39.727-225.47 156.634-233.908 297.15-.664 10.903 7.964 20.195 18.963 20.195 9.955 0 18.3-7.775 18.963-17.73C227.745 718.507 355.65 596.385 512 596.385s284.255 122.122 293.357 276.196c.569 9.955 8.913 17.73 18.963 17.73 10.999 0 19.627-9.292 18.963-20.195zM319.526 364.089c0-106.288 86.187-192.474 192.474-192.474S704.474 257.8 704.474 364.089c0 106.287-86.187 192.474-192.474 192.474s-192.474-86.187-192.474-192.474z"></path>
+    </svg>"
+  `);
+});

04-frameworks/03-vue/Dia_3/components/Chat/ChatUserIcon.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path
+      d="M843.283 870.116c-8.439-140.516-104.296-257.423-233.908-297.15C687.88 536.273 742.4 456.533 742.4 364.089c0-127.242-103.159-230.4-230.4-230.4s-230.4 103.158-230.4 230.4c0 92.444 54.519 172.184 133.12 208.877-129.612 39.727-225.47 156.634-233.908 297.15-.664 10.903 7.964 20.195 18.963 20.195 9.955 0 18.3-7.775 18.963-17.73C227.745 718.507 355.65 596.385 512 596.385s284.255 122.122 293.357 276.196c.569 9.955 8.913 17.73 18.963 17.73 10.999 0 19.627-9.292 18.963-20.195zM319.526 364.089c0-106.288 86.187-192.474 192.474-192.474S704.474 257.8 704.474 364.089c0 106.287-86.187 192.474-192.474 192.474s-192.474-86.187-192.474-192.474z" />
+  </svg>
+</template>

04-frameworks/03-vue/Dia_3/components/Chat/TheChat.vue

@@ -0,0 +1,73 @@
+<template>
+  <section class="grid grid-rows-[1fr,200px] h-full px-3 pt-3 pb-5 gap-4 overflow-hidden">
+    <ChatTheOutput :conversation="conversation" />
+
+    <form @submit.prevent="onSubmit" class="flex justify-end gap-4">
+      <textarea class="block w-full resize-none rounded-md p-2 bg-gray-700 border border-1 text-white"
+        @keydown="onKeyDown" @keyup="onKeyUp" autofocus v-model="message"></textarea>
+
+      <button type="button" v-if="hasAbort" class="rounded-md hover:bg-gray-700 hover:text-white p-3 self-end"
+        @click="abort">Abort</button>
+
+      <button class="rounded-md hover:bg-gray-700 hover:text-white p-3 self-end">
+        Send
+      </button>
+    </form>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const message = ref('');
+
+const isShiftPressed = ref(false);
+
+const onKeyDown = (event: KeyboardEvent) => {
+  if (event.key === 'Shift') {
+    isShiftPressed.value = true;
+  }
+};
+
+const onKeyUp = (event: KeyboardEvent) => {
+  if (event.key === 'Shift') {
+    isShiftPressed.value = false;
+  }
+
+  if (event.key === 'Enter' && !isShiftPressed.value) {
+    onSubmit();
+
+    return;
+  }
+};
+
+const ai = useAI();
+
+const route = useRoute();
+
+const chatHistory = useChatHistory();
+const chatId = computed(() => route.params.chatId as string)
+const conversation = computed(() => chatHistory.getConversation(chatId.value));
+
+let abort: () => void;
+const hasAbort = ref(false);
+const onSubmit = async () => {
+  const chatRecord = chatHistory.messageFactory(message.value, 'user');
+  chatHistory.addMessage(chatRecord, chatId.value);
+  message.value = '';
+
+  const response = await ai.getCompletion(conversation.value,);
+  abort = response.abort
+  hasAbort.value = true;
+
+  await nextTick()
+
+  const date = Date.now();
+
+  for await (const part of response) {
+    const chatRecord = chatHistory.messageFactory(part.message.content, 'ai', date);
+    chatHistory.updateAssistantMessage(chatRecord, chatId.value);
+  }
+  abort = () => { };
+  hasAbort.value = false;
+};
+</script>