Merge branch 'dev'

dashboard/assets/scss/colors.scss

@@ -0,0 +1,6 @@
+:root {
+    --current-card-color: #1d1d1f;
+    --card-color-1: #1d1d1f;
+    --card-color-2: #1f1f1f;
+    --card-color-3: #0f0f0f;
+}

dashboard/assets/scss/main.scss

@@ -4,6 +4,7 @@
 
 @import '../font-awesome/css/all.css';
 @import './utilities.scss';
+@import './colors.scss';
 
 @import url('https://fonts.cdnfonts.com/css/geometric-sans-serif-v1');
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

dashboard/components/CVerticalNavigation.vue

@@ -25,6 +25,8 @@ const props = defineProps<Props>();
 
 const { isAdmin } = useUserRoles();
 
+const debugMode = process.dev;
+
 const { isOpen, close } = useMenu();
 
 </script>
@@ -41,27 +43,31 @@ const { isOpen, close } = useMenu();
                     <img class="h-[2rem]" :src="'/logo.png'">
                 </div>
                 <div class="font-bold text-[1.4rem] text-gray-300"> Litlyx </div>
-                
+
                 <div class="grow flex justify-end text-[1.4rem] mr-2 lg:hidden">
                     <i @click="close()" class="fas fa-close"></i>
                 </div>
 
             </div>
 
+            <div v-if="debugMode" class="flex justify-center w-full">
+                <ThemeSelector></ThemeSelector>
+            </div>
+
             <div class="flex flex-col gap-4">
 
                 <div v-for="section of sections" class="flex flex-col gap-1">
 
                     <div v-for="entry of section.entries">
 
-                        <div class="bg-[#111111] text-gray-300 hover:bg-[#1b1b1b] py-2 px-4 rounded-lg" :class="{
+                        <div v-if="(!entry.adminOnly || (isAdmin && !isAdminHidden))"
-                            'text-gray-700 pointer-events-none': entry.disabled,
+                            class="bg-[#111111] text-gray-300 hover:bg-[#1b1b1b] py-2 px-4 rounded-lg" :class="{
-                            'bg-[#1b1b1b]': route.path == (entry.to || '#')
+                                'text-gray-700 pointer-events-none': entry.disabled,
-                        }">
+                                'bg-[#1b1b1b]': route.path == (entry.to || '#')
+                            }">
 
                             <NuxtLink @click="close() && entry.action?.()" :target="entry.external ? '_blank' : ''"
-                                v-if="(!entry.adminOnly || (isAdmin && !isAdminHidden))" tag="div" class="flex"
+                                tag="div" class="flex" :to="entry.to || '/'">
-                                :to="entry.to || '/'">
                                 <div class="flex items-center w-[1.8rem] justify-start">
                                     <i :class="entry.icon"></i>
                                 </div>
@@ -83,7 +89,6 @@ const { isOpen, close } = useMenu();
 
 
 <style lang="scss" scoped>
-
 .CVerticalNavigation * {
     font-family: 'Geist';
 }

dashboard/components/ThemeSelector.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+
+
+function cardColor(val: number) {
+    document.documentElement.style.setProperty(
+        '--current-card-color',
+        `var(--card-color-${val})`
+    );
+}
+
+</script>
+
+<template>
+    <div class="flex gap-2 bg-[#151517] py-3 px-8 rounded-lg">
+        <div @click="cardColor(1)" class="card1 px-4 py-1 rounded-lg cursor-pointer">
+            A
+        </div>
+        <div @click="cardColor(2)" class="card2 px-4 py-1 rounded-lg cursor-pointer">
+            B
+        </div>
+        <div @click="cardColor(3)" class="card3 px-4 py-1 rounded-lg cursor-pointer">
+            C
+        </div>
+    </div>
+</template>
+
+
+<style scoped lang=scss>
+.card1 {
+    background-color: var(--card-color-1) !important;
+}
+
+.card2 {
+    background-color: var(--card-color-2) !important;
+}
+
+.card3 {
+    background-color: var(--card-color-3) !important;
+}
+</style>

dashboard/components/dashboard/BarsCard.vue

@@ -16,7 +16,8 @@ type Props = {
     isDetailView?: boolean,
     rawButton?: boolean,
     hideShowMore?: boolean,
-    customIconStyle?: string
+    customIconStyle?: string,
+    showLink?: boolean
 }
 const props = defineProps<Props>();
 const emits = defineEmits<{
@@ -40,6 +41,11 @@ function showDetails(id: string) {
     emits('showDetails', id);
 }
 
+function openExternalLink(link: string) {
+    if (link === 'self') return;
+    return window.open('https://' + link, '_blank');
+}
+
 </script>
 
 <template>
@@ -89,28 +95,40 @@ function showDetails(id: string) {
                     </div>
 
                     <div class="flex flex-col gap-1">
+
                         <div v-if="props.data.length > 0" class="flex justify-between items-center"
                             v-for="element of props.data">
-                            <div class="w-10/12 relative" @click="showDetails(element._id)"
-                                :class="{ 'cursor-pointer line-active': interactive }">
-                                <div class="absolute rounded-sm w-full h-full bg-[#92abcf38]"
-                                    :style="'width:' + 100 / maxData * element.count + '%;'"></div>
-                                <div class="flex px-2 py-1 relative items-center gap-4">
-                                    <div v-if="iconProvider && iconProvider(element._id) != undefined"
-                                        class="flex items-center h-[1.3rem]">
 
-                                        <img v-if="iconProvider(element._id)?.[0] == 'img'"
+                            <div class="flex items-center gap-2 w-10/12 relative">
-                                         class="h-full"
-                                         :style="customIconStyle"
-                                         :src="iconProvider(element._id)?.[1]">
 
-                                        <i v-else :class="iconProvider(element._id)?.[1]"></i>
+                                <div v-if="showLink">
+                                    <i @click="openExternalLink(element._id)"
+                                        class="fas fa-link text-gray-300 hover:text-gray-400 cursor-pointer"></i>
+                                </div>
+
+                                <div class="flex gap-1 items-center" @click="showDetails(element._id)"
+                                    :class="{ 'cursor-pointer line-active': interactive }">
+
+                                    <div class="absolute rounded-sm w-full h-full bg-[#92abcf38]"
+                                        :style="'width:' + 100 / maxData * element.count + '%;'"></div>
+
+                                    <div class="flex px-2 py-1 relative items-center gap-4">
+                                        <div v-if="iconProvider && iconProvider(element._id) != undefined"
+                                            class="flex items-center h-[1.3rem]">
+
+                                            <img v-if="iconProvider(element._id)?.[0] == 'img'" class="h-full"
+                                                :style="customIconStyle" :src="iconProvider(element._id)?.[1]">
+
+                                            <i v-else :class="iconProvider(element._id)?.[1]"></i>
+                                        </div>
+                                        <span
+                                            class="text-ellipsis line-clamp-1 ui-font z-[20] text-[.95rem] text-text/70">
+                                            {{ elementTextTransformer?.(element._id) || element._id }}
+                                        </span>
                                     </div>
-                                    <span class="text-ellipsis line-clamp-1 ui-font z-[20] text-[.95rem] text-text/70">
-                                        {{ elementTextTransformer?.(element._id) || element._id }}
-                                    </span>
                                 </div>
                             </div>
+
                             <div class="text-text font-semibold text-[.9rem] md:text-[1rem] manrope"> {{
                                 formatNumberK(element.count) }} </div>
                         </div>

dashboard/components/dashboard/ReferrersBarCard.vue

@@ -24,7 +24,7 @@ const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
 const customDialog = useCustomDialog();
 
 function onShowDetails(referrer: string) {
-    
+
     customDialog.openDialog(ReferrerBarChart, { slice: 'day', referrer });
 }
 
@@ -56,7 +56,7 @@ function showMore() {
     <div class="flex flex-col gap-2">
         <DashboardBarsCard @showDetails="onShowDetails" @showMore="showMore()"
             :elementTextTransformer="elementTextTransformer" :iconProvider="iconProvider" @dataReload="refresh"
-            :data="events || []" :interactive="true" desc="Where users find your website." :dataIcons="true"
+            :showLink=true :data="events || []" :interactive="true" desc="Where users find your website."
-            :loading="pending" label="Top Referrers" sub-label="Referrers"></DashboardBarsCard>
+            :dataIcons="true" :loading="pending" label="Top Referrers" sub-label="Referrers"></DashboardBarsCard>
     </div>
 </template>

dashboard/pages/analyst.vue

@@ -17,8 +17,10 @@ const currentChatMessages = ref<any[]>([]);
 const scroller = ref<HTMLDivElement | null>(null);
 
 async function sendMessage() {
+
     if (loading.value) return;
     if (!activeProject.value) return;
+
     loading.value = true;
 
     const body: any = { text: currentText.value }
@@ -63,6 +65,7 @@ async function sendMessage() {
 }
 
 async function openChat(chat_id?: string) {
+    menuOpen.value = false;
     if (!activeProject.value) return;
     if (!chat_id) {
         currentChatMessages.value = [];
@@ -87,53 +90,27 @@ function parseMessageContent(content: string) {
     return content.replace(/\*\*(.*?)\*\*/g, '<b class="text-text">$1</b>');
 }
 
+function onKeyDown(e: KeyboardEvent) {
+    if (e.code !== 'Enter') return;
+    if (e.shiftKey === true) return;
+    sendMessage();
+}
+
+const menuOpen = ref<boolean>(false);
+
+const defaultPrompts = [
+    'How many visits i got last week ?',
+    'How many visits i got last month ?',
+    'How many visits i got today ?',
+    'How many events i got last week ?',
+]
+
 </script>
 
 <template>
     <div class="w-full h-full">
 
-        <div class="flex flex-row-reverse h-full">
+        <div class="flex flex-row h-full">
-
-            <div class="flex-[2] bg-[#303030] p-6 flex flex-col gap-4">
-
-                <div class="gap-2 flex flex-col">
-                    <div class="poppins font-semibold text-[1.5rem]">
-                        Lit, your AI Analyst is here!
-                    </div>
-                    <div class="poppins text-text/75">
-                        Ask anything you want on your analytics,
-                        and understand more Trends and Key Points to take Strategic moves!
-                    </div>
-                </div>
-
-                <div class="flex gap-2 items-center py-3">
-                    <div class="bg-accent w-5 h-5 rounded-full animate-pulse">
-                    </div>
-                    <div class="manrope font-semibold"> {{ chatsRemaining }} remaining messages </div>
-                </div>
-
-                <div>
-                    <div class="poppins font-semibold text-[1.1rem]"> History: </div>
-
-                    <div class="flex flex-col w-full mt-4 gap-2">
-
-                        <div @click="openChat()"
-                            class="bg-menu px-4 py-3 cursor-pointer hover:bg-menu/80 poppins rounded-lg mb-8 flex gap-2 items-center">
-                            <div> <i class="fas fa-plus"></i> </div>
-                            <div> New chat </div>
-                        </div>
-
-                        <div @click="openChat(chat._id.toString())" v-for="chat of chatsList"
-                            class="bg-menu px-4 py-3 cursor-pointer hover:bg-menu/80 poppins rounded-lg"
-                            :class="{ '!bg-accent/60': chat._id.toString() === currentChatId }">
-                            {{ chat.title }}
-                        </div>
-                    </div>
-
-                </div>
-
-
-            </div>
 
             <div class="flex-[5] py-8 flex flex-col items-center relative">
 
@@ -145,22 +122,14 @@ function parseMessageContent(content: string) {
                         How can i help you today?
                     </div>
                     <div class="grid grid-cols-2 gap-4 mt-6">
-                        <div class="bg-[#2f2f2f] p-4 rounded-lg poppins">
+                        <div v-for="prompt of defaultPrompts" @click="currentText = prompt"
-                            How many visits i got last week ?
+                            class="bg-[#2f2f2f] hover:bg-[#424242] cursor-pointer p-4 rounded-lg poppins text-center">
-                        </div>
+                            {{ prompt }}
-                        <div class="bg-[#2f2f2f] p-4 rounded-lg poppins">
-                            How many visits i got last week ?
-                        </div>
-                        <div class="bg-[#2f2f2f] p-4 rounded-lg poppins">
-                            How many visits i got last week ?
-                        </div>
-                        <div class="bg-[#2f2f2f] p-4 rounded-lg poppins">
-                            How many visits i got last week ?
                         </div>
                     </div>
                 </div>
 
-                <div ref="scroller" class="flex flex-col w-full gap-6 px-28 overflow-y-auto pb-20">
+                <div ref="scroller" class="flex flex-col w-full gap-6 px-6 xl:px-28 overflow-y-auto pb-20">
 
                     <div class="flex w-full" v-for="message of currentChatMessages">
                         <div class="flex justify-end w-full poppins text-[1.1rem]" v-if="message.role === 'user'">
@@ -191,17 +160,71 @@ function parseMessageContent(content: string) {
 
 
 
-                <div class="flex gap-2 items-center absolute bottom-8 left-0 w-full px-28">
+                <div class="flex gap-2 items-center absolute bottom-8 left-0 w-full px-10 xl:px-28">
-                    <input v-model="currentText" class="bg-[#303030] w-full focus:outline-none px-4 py-2 rounded-lg"
+                    <input @keydown="onKeyDown" v-model="currentText"
-                        type="text">
+                        class="bg-[#303030] w-full focus:outline-none px-4 py-2 rounded-lg" type="text">
                     <div @click="sendMessage()"
                         class="bg-[#303030] hover:bg-[#464646] cursor-pointer px-4 py-2 rounded-full">
                         <i class="far fa-arrow-up"></i>
                     </div>
+                    <div @click="menuOpen = !menuOpen"
+                        class="bg-[#303030] lg:hidden hover:bg-[#464646] cursor-pointer px-4 py-2 rounded-full">
+                        <i class="far fa-message"></i>
+                    </div>
                 </div>
 
             </div>
 
+
+            <div :class="{
+                'absolute': menuOpen,
+                'hidden lg:flex': !menuOpen
+            }" class="flex-[2] bg-[#303030] p-6 flex flex-col gap-4 h-full overflow-hidden">
+
+                <div class="gap-2 flex flex-col">
+                    <div class="lg:hidden absolute right-4 top-4 text-[1.5rem]">
+                        <i @click="menuOpen = false" class="fas fa-close cursor-pointer"></i>
+                    </div>
+                    <div class="poppins font-semibold text-[1.5rem]">
+                        Lit, your AI Analyst is here!
+                    </div>
+                    <div class="poppins text-text/75">
+                        Ask anything you want on your analytics,
+                        and understand more Trends and Key Points to take Strategic moves!
+                    </div>
+                </div>
+
+                <div class="flex gap-2 items-center py-3">
+                    <div class="bg-accent w-5 h-5 rounded-full animate-pulse">
+                    </div>
+                    <div class="manrope font-semibold"> {{ chatsRemaining }} remaining messages </div>
+                </div>
+
+                <div class="poppins font-semibold text-[1.1rem]"> History: </div>
+
+                <div class="px-2">
+                    <div @click="openChat()"
+                        class="bg-menu cursor-pointer hover:bg-menu/80 rounded-lg px-4 py-3 poppins flex gap-2 items-center">
+                        <div> <i class="fas fa-plus"></i> </div>
+                        <div> New chat </div>
+                    </div>
+                </div>
+
+
+                <div class="overflow-y-auto">
+                    <div class="flex flex-col gap-2 px-2">
+                        <div @click="openChat(chat._id.toString())" v-for="chat of chatsList?.toReversed()"
+                            class="bg-menu px-4 py-3 cursor-pointer hover:bg-menu/80 poppins rounded-lg"
+                            :class="{ '!bg-accent/60': chat._id.toString() === currentChatId }">
+                            {{ chat.title }}
+                        </div>
+                    </div>
+                </div>
+
+
+
+            </div>
+
         </div>
 
     </div>

dashboard/tailwind.config.js

@@ -11,7 +11,7 @@ module.exports = {
             },
             colors: {
                 card: {
-                    DEFAULT: '#1d1d1f',
+                    DEFAULT: 'var(--current-card-color)',
                 },
                 bg: {
                     DEFAULT: '#151517',

landing/layouts/header.vue

@@ -138,10 +138,10 @@ nuxtApp.hook("page:finish", () => {
                     <div class="flex gap-6 text-[1.6rem] text-text-sub/80">
                         <!-- <div> <i class="fab fa-x-twitter"></i> </div> -->
                         <div class="flex gap-4">
-                            <a href="https://www.linkedin.com/company/litlyx" target="_blank">
+                            <a class="hover:text-gray-400" href="https://www.linkedin.com/company/litlyx" target="_blank">
                                 <i class="fab fa-linkedin"></i>
                             </a>
-                            <a href="https://www.github.com/Litlyx/litlyx" target="_blank">
+                            <a class="hover:text-gray-400" href="https://www.github.com/Litlyx/litlyx" target="_blank">
                                 <i class="fab fa-github"></i>
                             </a>
                         </div>

shared/data/ADMINS.ts

@@ -1,4 +1,5 @@
 export const ADMIN_EMAILS = [
     'laura.emily.lovi@gmail.com',
-    'mangaiomaster@gmail.com'
+    'mangaiomaster@gmail.com',
+    'helplitlyx@gmail.com'
 ]