refactor: improve chatbot responsiveness (#481)
Co-authored-by: Davide Di Modica <webmaster.ddm@gmail.com>
taylor_socfortress committed
Jul 23, 2025 at 18:19 UTC
f8f55c38d9c2546b9e3221514f7c1a8fca644c30
4 files changed
+41
-8
frontend/src/assets/scss/overrides/naive-override.scss
+29
@@ -20,6 +20,35 @@
20
}
21
}
22
23
+.n-drawer__resize-trigger {
24
+ &::before {
25
+ content: "::";
26
+ background-color: var(--bg-default-color);
27
+ width: 16px;
28
+ height: 26px;
29
+ display: flex;
30
+ position: absolute;
31
+ top: 50%;
32
+ right: 0px;
33
+ text-align: center;
34
+ justify-content: center;
35
+ align-items: center;
36
+ border-radius: 12px 0 0 12px;
37
+ letter-spacing: 1px;
38
+ padding-bottom: 2px;
39
+ padding-left: 4px;
40
+ line-height: 0;
41
+ transition: background-color 0.3s var(--n-bezier);
42
+ }
43
+
44
+ &.n-drawer__resize-trigger--hover {
45
+ &::before {
46
+ background-color: var(--primary-color);
47
+ color: var(--fg-tertiary-color);
48
+ }
49
+ }
50
+}
51
+
52
.n-image-preview-container {
53
.n-image-preview-overlay {
54
backdrop-filter: blur(3px);
frontend/src/assets/scss/overrides/vue-md-it-override.scss
+4
-1
@@ -10,13 +10,16 @@
10
--cell-padding: 8px 12px;
11
12
width: 100%;
13
+ max-width: 100%;
14
border: 1px solid var(--border-color);
15
border-radius: var(--border-radius);
16
text-align: left;
17
font-variant-numeric: tabular-nums;
18
border-collapse: separate;
19
border-spacing: 0;
19
- overflow: hidden;
20
+ overflow-x: scroll;
21
+ display: block;
22
+ white-space: nowrap;
23
24
thead {
25
tr {
frontend/src/components/aiChatbot/ChatBubble.vue
+5
-5
@@ -44,12 +44,12 @@
44
<div v-if="thought && isThoughtVisible">
45
<CollapseKeepAlive :show="!isThoughtCollapsed">
46
<div class="text-secondary bg-secondary mb-2 rounded-md p-2 [&_*]:text-[10px]">
47
- <Markdown :source="thought" class="animate-fade" />
47
+ <Markdown :source="thought" class="animate-fade overflow-hidden" />
48
</div>
49
</CollapseKeepAlive>
50
</div>
51
- <div v-if="body && isBodyVisible" class="[&_*:last-child]:mb-0! [&_*]:text-sm [&_*]:text-white">
52
- <Markdown :source="body" class="animate-fade" />
51
+ <div v-if="body && isBodyVisible" class="[&_*:last-child]:mb-0! [&_*]:text-default [&_*]:text-sm">
52
+ <Markdown :source="body" class="animate-fade overflow-hidden" />
53
</div>
54
</template>
55
@@ -83,8 +83,8 @@
83
</n-tooltip>
84
</div>
85
</div>
86
- <div class="bg-secondary [&_*:last-child]:mb-0! rounded-lg px-2 py-1 text-sm [&_*]:text-white">
87
- <Markdown :source="entity.body" class="animate-fade" />
86
+ <div class="bg-secondary [&_*:last-child]:mb-0! [&_*]:text-default rounded-lg px-2 py-1 text-sm">
87
+ <Markdown :source="entity.body" class="animate-fade overflow-hidden" />
88
</div>
89
</div>
90
</template>
frontend/src/components/aiChatbot/ChatButton.vue
+3
-2
@@ -14,10 +14,11 @@
14
15
<n-drawer
16
v-model:show="showDrawer"
17
- :width="400"
18
- class="max-w-[90vw]"
17
+ :default-width="400"
18
+ class="min-w-85 max-w-[90vw]"
19
display-directive="show"
20
:trap-focus="false"
21
+ resizable
22
>
23
<n-drawer-content title="AI Chatbot" closable body-content-class="p-0! overflow-hidden! flex flex-col">
24
<ChatContainer class="grow" />