Skip to content

Commit 3b64fde

Browse files
yeusyeus
committed
refactor chat layout...
1 parent a26ff8a commit 3b64fde

File tree

2 files changed

+216
-193
lines changed

2 files changed

+216
-193
lines changed

‎src/components/taskyon/TaskyonHeader.vue‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<template>
2+
<q-header class="column print-hide">
3+
<component
4+
:is="!minMode ? 'q-toolbar' : 'div'"
5+
:class="minMode ? 'q-gutter-xs row q-px-sm' : 'q-gutter-xs'"
6+
>
7+
<q-btn
8+
flat
9+
round
10+
dense
11+
:size="btnSize"
12+
:icon="matMenu"
13+
aria-label="Open Sidebar"
14+
@click="drawerOpen = !drawerOpen"
15+
/>
16+
<div v-if="state" :class="['q-ml-lg', minMode ? '' : 'button-group']">
17+
<q-btn
18+
v-if="!minMode"
19+
flat
20+
dense
21+
:size="btnSize"
22+
:icon="matSearch"
23+
to="/taskmanager"
24+
aria-label="go to taskmanager"
25+
>
26+
<q-tooltip>Search Conversations</q-tooltip>
27+
</q-btn>
28+
<q-btn
29+
v-if="!minMode"
30+
flat
31+
dense
32+
:icon="mdiForum"
33+
to="/"
34+
:size="btnSize"
35+
aria-label="go to chat"
36+
><q-tooltip>Go to Chat</q-tooltip>
37+
</q-btn>
38+
<q-btn
39+
flat
40+
dense
41+
:icon="mdiForumPlus"
42+
:size="btnSize"
43+
to="/"
44+
aria-label="start new chat"
45+
@click="state.llmSettings.selectedTaskId = undefined"
46+
><q-tooltip>Create New Chat</q-tooltip>
47+
</q-btn>
48+
</div>
49+
<q-space />
50+
<q-btn
51+
v-if="state && state.getErrors().length > 0"
52+
flat
53+
dense
54+
round
55+
:size="btnSize"
56+
color="warning"
57+
:icon="matWarning"
58+
to="/diagnostics"
59+
>
60+
<q-tooltip
61+
>There was problem with taskyon!, click here to find out
62+
more..</q-tooltip
63+
>
64+
</q-btn>
65+
<q-btn
66+
v-if="$route.path == '/'"
67+
flat
68+
dense
69+
round
70+
:size="btnSize"
71+
:icon="matToc"
72+
>
73+
<q-menu>
74+
<table-of-chat-content></table-of-chat-content>
75+
</q-menu>
76+
<q-tooltip> Table of Contents </q-tooltip>
77+
</q-btn>
78+
<q-btn
79+
v-if="!minMode"
80+
flat
81+
class="gt-xs"
82+
dense
83+
round
84+
:size="btnSize"
85+
:icon="matHelpOutline"
86+
to="/docs/index"
87+
>
88+
<q-tooltip> Open Taskyon Documentation </q-tooltip>
89+
</q-btn>
90+
<q-separator v-if="!minMode" class="desktop-only" vertical></q-separator>
91+
<q-btn
92+
v-if="!minMode"
93+
round
94+
flat
95+
dense
96+
icon="svguse:/taskyon_mono_opt.svg#taskyon"
97+
>
98+
<q-menu>
99+
<q-list dense>
100+
<q-item :size="btnSize" to="/settings">
101+
<q-item-section avatar>
102+
<q-icon :name="matSettings" />
103+
</q-item-section>
104+
<q-item-section>Open settings</q-item-section>
105+
</q-item>
106+
<q-item
107+
v-ripple
108+
clickable
109+
href="https://github.com/xyntopia/taskyon"
110+
target="_blank"
111+
exact
112+
>
113+
<q-item-section avatar>
114+
<q-icon :name="mdiGithub" />
115+
</q-item-section>
116+
<q-item-section>Visit our Taskyon repository</q-item-section>
117+
</q-item>
118+
<q-separator />
119+
<q-item
120+
v-ripple
121+
clickable
122+
to="/docs/index"
123+
exact
124+
active-class="text-secondary"
125+
>
126+
<q-item-section avatar>
127+
<q-icon :name="matHelpOutline" />
128+
</q-item-section>
129+
<q-item-section> Documentation </q-item-section>
130+
</q-item>
131+
<q-item
132+
v-ripple
133+
clickable
134+
to="/pricing"
135+
exact
136+
active-class="text-secondary"
137+
>
138+
<q-item-section> AI chat price list </q-item-section>
139+
</q-item>
140+
<q-separator />
141+
<q-item>
142+
<q-item-section>
143+
<DarkModeButton
144+
v-if="state"
145+
dense
146+
flat
147+
label="Change Theme"
148+
:size="btnSize"
149+
@theme-changed="(newMode) => (state!.darkTheme = newMode)"
150+
/>
151+
</q-item-section>
152+
</q-item>
153+
</q-list>
154+
</q-menu>
155+
</q-btn>
156+
<q-btn
157+
v-else
158+
flat
159+
dense
160+
size="xs"
161+
icon-right="svguse:/taskyon_mono_opt.svg#taskyon"
162+
no-caps
163+
href="https://taskyon.space"
164+
target="_blank"
165+
exact
166+
>
167+
<q-tooltip :delay="500">Powered by taskyon.space</q-tooltip>
168+
</q-btn>
169+
</component>
170+
</q-header>
171+
</template>
172+
173+
<script setup lang="ts">
174+
import DarkModeButton from 'components/DarkModeButton.vue';
175+
import { ref } from 'vue';
176+
import { defineAsyncComponent } from 'vue';
177+
import type { useTaskyonStore } from 'stores/taskyonState';
178+
import {
179+
matHelpOutline,
180+
matMenu,
181+
matSearch,
182+
matSettings,
183+
matToc,
184+
matWarning,
185+
} from '@quasar/extras/material-icons';
186+
import { mdiForum, mdiForumPlus, mdiGithub } from '@quasar/extras/mdi-v6';
187+
188+
defineProps<{
189+
minMode: boolean | undefined;
190+
btnSize: 'xs' | 'md';
191+
}>();
192+
const drawerOpen = defineModel<boolean>('drawerOpen', { required: true });
193+
194+
const TableOfChatContent = defineAsyncComponent(
195+
() =>
196+
import(
197+
/* webpackChunkName: "TableOfChatContent" */
198+
/* webpackMode: "lazy" */
199+
/* webpackFetchPriority: "low" */
200+
'components/taskyon/TableOfChatContent.vue'
201+
),
202+
);
203+
204+
//const state = useTaskyonStore();
205+
let state = ref<undefined | ReturnType<typeof useTaskyonStore>>();
206+
207+
void import('stores/taskyonState').then(({ useTaskyonStore }) => {
208+
state.value = useTaskyonStore();
209+
});
210+
</script>

0 commit comments

Comments
 (0)