themes.

ChristianPavilonis · Sep 5, 2023 · 32be6c6 · 32be6c6
1 parent ed55fe9
commit 32be6c6
Show file tree

Hide file tree

Showing 15 changed files with 245 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <title>Tauri + Vue + TS</title>
   </head>
 
-  <body class="w-full min-h-[100vh] bg-black/10 overflow-x-hidden   ">
+  <body class="w-full min-h-[100vh] bg-default overflow-x-hidden text-default">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="text-white flex">
+    <div class="flex">
         <Sidebar/>
         <div class="container mx-auto overflow-y-auto">
             <RouterView/>
@@ -12,16 +12,17 @@
 import {inject, onMounted} from "vue";
 import {Store} from "tauri-plugin-store-api";
 import {useRouter} from "vue-router";
-import {createConversation, shortcut} from "./Lib/helpers";
+import {createConversation, setTheme, shortcut, useStore} from "./Lib/helpers";
 import Sidebar from "./components/Sidebar.vue";
 
+const store = useStore();
 const router = useRouter();
 
 function navigateToSettings() {
     router.push("/settings");
 }
 
-onMounted(() => {
+onMounted(async () => {
     shortcut({
         key: ",",
         modifier: true,
@@ -33,10 +34,12 @@ onMounted(() => {
     shortcut({
         key: "n",
         modifier: true,
-        handler(event) : void {
+        handler(event): void {
             createConversation(router)
         }
-    })
+    });
+
+    await setTheme();
 });
 
 </script>

diff --git a/src/Lib/helpers.ts b/src/Lib/helpers.ts
@@ -92,3 +92,16 @@ export async function createConversation(router: Router) {
     await router.push(`/conversation/${id}`);
     store.pushConversation({id})
 }
+
+export async function setTheme() {
+    const store = useStore();
+    const theme : string = await store.get('theme') || "theme-default";
+
+   document.body.classList.forEach((item) => {
+       if(item.includes('theme-')) {
+           document.body.classList.remove(item);
+       }
+   })
+
+    document.body.classList.add(theme);
+}
diff --git a/src/Lib/types.ts b/src/Lib/types.ts
@@ -0,0 +1,4 @@
+
+
+
+export type Theme = "theme-default" | "theme-dark" | "theme-light";
diff --git a/src/Pages/Conversation.vue b/src/Pages/Conversation.vue
@@ -1,30 +1,28 @@
 <template>
     <div class="w-full relative pt-32" ref="container">
-        <div class="fixed bg-black/80 top-0 flex justify-between items-center" ref="bar">
+        <div class="fixed bg-shade-9 top-0 flex justify-between items-center" ref="bar">
             <div>
                 <input
-                    class="focus:bg-black/40 bg-transparent py-8 px-12"
+                    class="focus:bg-shade-6 bg-transparent py-8 px-12"
                     v-model="systemPrompt"
                     type="text"
                 >
             </div>
-            <button class="p-20 rounded hover:bg-black/30" @click="deleteConversation">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-24 h-24">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
-                </svg>
+            <!--            <Find :conversation="conversation"/>-->
+            <button class="p-20 rounded hover:bg-shade-6" @click="deleteConversation">
+                <IconTrash/>
             </button>
         </div>
+
         <div class="max-w-800 mx-auto pt-20 pb-80">
             <div class="space-y-12">
                 <div
-                    v-for="message in displayMessages"
+                    v-for="(message, index) in displayMessages"
                     class="flex rounded-md max-w-800 px-25 py-18"
-                    :class="message.role === 'assistant' ? 'ml-auto bg-black/50': 'mr-auto bg-black/20'"
+                    :class="message.role === 'assistant' ? 'ml-auto bg-shade-9': 'mr-auto bg-shade-5'"
+                    :id="'message-'+index"
                 >
-                    <Markdown
-                        class="prose prose-invert"
-                        :source="message.content"
-                    />
+                    <Markdown :message="message"/>
                 </div>
             </div>
 
@@ -52,14 +50,14 @@
 import {computed, nextTick, onMounted, ref, watch} from 'vue';
 import {OpenAIApi} from "openai";
 import ChatBox from "../components/ChatBox.vue";
-// @ts-ignore
-import Markdown from 'vue3-markdown-it';
 import 'highlight.js/styles/github-dark-dimmed.css';
 import AsyncIndicator from "../components/AsyncIndicator.vue";
 import {createOpenAiClient, sendChatMessage, shortcut, useStore} from "../Lib/helpers";
 import {invoke} from "@tauri-apps/api";
 import {useRoute, useRouter} from "vue-router";
 import {useConversationsStore} from "../Lib/ConversationsStore";
+import Markdown from "../components/Markdown.vue";
+import IconTrash from "../components/Icons/IconTrash.vue";
 
 const conversationStore = useConversationsStore();
 const store = useStore();
@@ -180,7 +178,9 @@ async function deleteConversation() {
 function setBarWidth() {
     const width = container.value?.offsetWidth;
 
-    bar.value.style.width = width + "px";
+    if (bar.value) {
+        bar.value.style.width = width + "px";
+    }
 }
 
 onMounted(async () => {
@@ -202,7 +202,7 @@ onMounted(async () => {
 
     window.onresize = setBarWidth;
     setBarWidth();
-})
+});
 
 </script>
 

diff --git a/src/Pages/Home.vue b/src/Pages/Home.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="flex justify-center items-center h-[100vh]">
         <button
-            class="px-12 py-8 bg-black/40 rounded uppercase"
+            class="px-12 py-8 bg-shade-6 rounded uppercase"
             @click="createConversation(router)"
         >
             new chat +

diff --git a/src/Pages/Settings.vue b/src/Pages/Settings.vue
@@ -11,7 +11,7 @@
             <label class="mr-8 w-550">
                 <span class="block uppercase font-semibold mb-12">Open Ai key</span>
                 <input
-                        class="bg-black/30 rounded py-8 px-12 w-full"
+                        class="bg-shade-6 rounded py-8 px-12 w-full"
                         :type="showKey ? 'text' : 'password'"
                         v-model="openApiKey"
                         @change="saveKey"
@@ -30,7 +30,7 @@
                 Model
             </label>
             <select
-                    class="bg-black"
+                    class="bg-shade-6"
                     v-model="model"
                     @change="saveModel"
                     name="model"
@@ -40,19 +40,38 @@
                 <option value="gpt-3.5-turbo">GPT 3.5 Turbo</option>
             </select>
         </div>
+
+        <div class="mt-12">
+            <label class="block uppercase mb-4" for="model">
+                Model
+            </label>
+            <select
+                class="bg-shade-6"
+                v-model="theme"
+                @change="saveTheme"
+                name="model"
+                id="model"
+            >
+                <option value="theme-default">Default</option>
+                <option value="theme-dark">Dark</option>
+                <option value="theme-light">Light</option>
+            </select>
+        </div>
     </div>
 </template>
 
 <script lang="ts" setup>
 import {inject, onMounted, ref} from 'vue';
 import {Store} from "tauri-plugin-store-api";
-import {createOpenAiClient, shortcut, useStore} from "../Lib/helpers";
+import {createOpenAiClient, setTheme, shortcut, useStore} from "../Lib/helpers";
 import {useRouter} from "vue-router";
 import {computedAsync} from "@vueuse/core";
+import {Theme} from "../Lib/types";
 
 const showKey = ref(false);
 const openApiKey = ref("");
 const model = ref("");
+const theme = ref<Theme>("theme-default");
 const store = useStore();
 const router = useRouter();
 
@@ -64,15 +83,22 @@ async function saveModel() {
     await store.set("ai-model", model.value);
 }
 
+async function saveTheme() {
+    await store.set("theme", theme.value);
+    await setTheme();
+}
+
 onMounted(async () => {
     const key: string | null = await store.get("openai-key");
     openApiKey.value = key || ""
 
     model.value = await store.get("ai-model") || "gpt-3.5-turbo";
 
+    theme.value = await store.get("theme") || "theme-default";
+
     shortcut("Escape", (event) => {
         router.push("/");
-    })
+    });
 })
 
 </script>

diff --git a/src/components/ChatBox.vue b/src/components/ChatBox.vue
@@ -1,5 +1,5 @@
 <template>
-    <form @submit.prevent="submit" class="bg-black/30 w-full flex">
+    <form @submit.prevent="submit" class="bg-shade-6 w-full flex">
             <textarea
                 class="bg-transparent w-full resize-none transition-all overflow-y-hidden px-24 text-lg"
                 :value="modelValue"

diff --git a/src/components/Find.vue b/src/components/Find.vue
@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <input class="border-[2px]" v-model="query" @input="search">
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {ref} from "vue";
+
+const props = defineProps<{conversation: any}>();
+
+const query = ref("");
+
+function search() { // todo: Maybe move to rust and replace text with markdown highlight.
+    const messages = props.conversation.messages;
+
+    let regex = new RegExp(query.value, 'gi');
+
+    for(let i = 0; i < messages.length; i++) {
+        if(regex.test(messages[i].content)) {
+            let el = document.querySelector(`#message-${i}`);
+            if(!el) {
+                continue;
+            }
+
+            el.innerHTML = el.innerHTML.replace(regex, (match) => {
+                return `<span class="bg-yellow-300">${match}</span>`;
+            });
+        }
+    }
+
+    // html = html.replace(regex, (match) => {
+    //     return `<span class="bg-yellow-300">${match}</span>`
+    // });
+    // el.innerHTML = html;
+
+}
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Icons/IconTrash.vue b/src/components/Icons/IconTrash.vue
@@ -0,0 +1,16 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+         stroke="currentColor" class="w-24 h-24">
+        <path stroke-linecap="round" stroke-linejoin="round"
+              d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
+    </svg>
+</template>
+
+<script lang="ts" setup>
+import {ref} from 'vue';
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Markdown.vue b/src/components/Markdown.vue
@@ -0,0 +1,35 @@
+<template>
+    <Markdown
+        :class="prose"
+        :source="message.content"
+    />
+</template>
+
+<script lang="ts" setup>
+import {ref} from 'vue';
+
+// @ts-ignore
+import Markdown from 'vue3-markdown-it';
+import {computedAsync} from "@vueuse/core";
+import {Theme} from "../Lib/types";
+import {useStore} from "../Lib/helpers";
+const store = useStore();
+
+defineProps<{message: {content: string}}>();
+
+const prose = computedAsync(async () => {
+    const theme: Theme =  await store.get("theme") || "theme-default";
+
+    if(theme === "theme-light") {
+        return "prose";
+    }
+    else {
+        return "prose prose-invert";
+    }
+});
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="min-w-280">
-        <div class="bg-black/20 w-280 h-[100vh] flex flex-col justify-between overflow-y-auto fixed z-1">
+        <div class="bg-shade-5 w-280 h-[100vh] flex flex-col justify-between overflow-y-auto fixed z-1">
             <div>
                 <SidebarItem
                     v-for="conversation in conversationsStore.conversations"

diff --git a/src/components/SidebarItem.vue b/src/components/SidebarItem.vue
@@ -1,8 +1,8 @@
 <template>
     <RouterLink
         :to="`/conversation/${conversation.id}`"
-        class="px-20 py-16 flex hover:bg-black/30 relative"
-        :class="isCurrentConversation(conversation.id) ? 'bg-black/30' : ''"
+        class="px-20 py-16 flex hover:bg-shade-6 relative"
+        :class="isCurrentConversation(conversation.id) ? 'bg-shade-6' : ''"
     >
         <svg
             class="w-24 h-24 mr-12"