Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-10 07:48:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev'

Browse Source
This commit is contained in:
Emily
2024-06-17 14:44:29 +02:00
parent 79af7d4126 3bf63f64fe
commit fa08d7ff0e
10 changed files with 182 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
dashboard/assets/scss/colors.scss Normal file
View File

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

1
dashboard/assets/scss/main.scss
View File

@@ -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');

13
dashboard/components/CVerticalNavigation.vue
View File

@@ -25,6 +25,8 @@ const props = defineProps<Props>();
const { isAdmin } = useUserRoles();
const debugMode = process.dev;
const { isOpen, close } = useMenu();
</script>
@@ -48,20 +50,24 @@ const { isOpen, close } = useMenu();
</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))"
class="bg-[#111111] text-gray-300 hover:bg-[#1b1b1b] py-2 px-4 rounded-lg" :class="{
'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"
:to="entry.to || '/'">
tag="div" class="flex" :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';
}

40
dashboard/components/ThemeSelector.vue Normal file
View File

@@ -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>

32
dashboard/components/dashboard/BarsCard.vue
View File

@@ -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)"
<div class="flex items-center gap-2 w-10/12 relative">
<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]">
<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">
<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>
<div class="text-text font-semibold text-[.9rem] md:text-[1rem] manrope"> {{
formatNumberK(element.count) }} </div>
</div>

4
dashboard/components/dashboard/ReferrersBarCard.vue
View File

@@ -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"
:loading="pending" label="Top Referrers" sub-label="Referrers"></DashboardBarsCard>
:showLink=true :data="events || []" :interactive="true" desc="Where users find your website."
:dataIcons="true" :loading="pending" label="Top Referrers" sub-label="Referrers"></DashboardBarsCard>
</div>
</template>

137
dashboard/pages/analyst.vue
View File

@@ -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-[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 flex-row h-full">
<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">
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 class="bg-[#2f2f2f] p-4 rounded-lg poppins">
How many visits i got last week ?
<div v-for="prompt of defaultPrompts" @click="currentText = prompt"
class="bg-[#2f2f2f] hover:bg-[#424242] cursor-pointer p-4 rounded-lg poppins text-center">
{{ prompt }}
</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,14 +160,68 @@ function parseMessageContent(content: string) {
<div class="flex gap-2 items-center absolute bottom-8 left-0 w-full px-28">
<input v-model="currentText" class="bg-[#303030] w-full focus:outline-none px-4 py-2 rounded-lg"
type="text">
<div class="flex gap-2 items-center absolute bottom-8 left-0 w-full px-10 xl:px-28">
<input @keydown="onKeyDown" v-model="currentText"
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>

2
dashboard/tailwind.config.js
View File

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

4
landing/layouts/header.vue
View File

@@ -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>

3
shared/data/ADMINS.ts
View File

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