Skip to content

Commit 93aa47e

Browse files
azmy60azmy60
committed
fix max width and loading screen
1 parent 768ef77 commit 93aa47e

File tree

7 files changed

+89
-59
lines changed

7 files changed

+89
-59
lines changed

‎src/App.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="shell-app">
3-
<div v-if="!appReady && showLoading" class="not-ready">
3+
<div v-if="!appReady" v-show="showLoading" class="not-ready">
44
<h1>AI Shell</h1>
55
<div class="progress-bar"></div>
66
</div>
@@ -58,6 +58,7 @@ export default {
5858
5959
try {
6060
await this.initialize();
61+
await this.$nextTick();
6162
6263
const configuration = useConfigurationStore();
6364
const apiKey =

‎src/assets/styles/components/_all.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use "buttons";
22
@use "spinner";
33
@use "dropdown";
4-
@use "run-query-message";
4+
@use "run-query-message-result";
55
@use "progress-bar";

src/assets/styles/components/_run-query-message.scss renamed to src/assets/styles/components/_run-query-message-result.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
.run-query-message {
1+
.run-query-message-result {
22
display: flex;
33
flex-direction: column;
44
gap: 0.5rem;
55
.view-more-btn {
66
width: max-content;
77
}
8+
9+
.null-cell, .empty-cell {
10+
opacity: 0.65;
11+
}
812
}

‎src/assets/styles/pages/_chat-interface.scss‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,18 @@
55
max-width: 100%;
66
background-color: var(--query-editor-bg);
77
border-radius: 8px;
8-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
98
display: flex;
109
flex-direction: column;
11-
overflow: hidden;
10+
align-items: center;
11+
--screen-max-width: 48rem;
12+
13+
.scroll-container {
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
width: 100%;
18+
overflow: auto;
19+
}
1220

1321
&.empty-chat {
1422
justify-content: center;
@@ -29,7 +37,8 @@
2937

3038
.chat-messages {
3139
flex: 1;
32-
overflow-y: auto;
40+
width: 100%;
41+
max-width: var(--screen-max-width);
3342
background-color: var(--theme-bg-chat);
3443
display: flex;
3544
flex-direction: column;
@@ -40,10 +49,14 @@
4049
}
4150

4251
.message {
43-
margin: 0.6rem 12px;
52+
margin-inline: 0.6rem;
4453
border-radius: 16px;
4554
max-width: 80%;
4655
word-wrap: break-word;
56+
57+
&.user {
58+
margin-block: 1rem;
59+
}
4760
}
4861

4962
.message-content {
@@ -199,7 +212,7 @@
199212
flex-direction: column;
200213
padding: 0.5rem 1rem;
201214
border-left: 2px solid var(--border-color);
202-
gap: 0.2rem;
215+
gap: 0.35rem;
203216
width: 100%;
204217

205218
.accept-icon,
@@ -299,6 +312,8 @@
299312
margin: 1rem;
300313
display: flex;
301314
flex-direction: column;
315+
width: calc(100% - 2rem);
316+
max-width: var(--screen-max-width);
302317

303318
textarea {
304319
flex: initial;

‎src/components/ChatInterface.vue‎

Lines changed: 46 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,55 @@
11
<template>
22
<div class="chat-container" :class="{ 'empty-chat': messages.length === 0 }">
3-
<h1 class="plugin-title">AI Shell</h1>
4-
<div class="chat-messages" ref="chatMessagesRef">
5-
<div
6-
v-for="message in messages"
7-
:key="message.id"
8-
:class="['message', message.role]"
9-
>
10-
<!-- TODO put this at the Message component -->
11-
<div class="message-content">
12-
<template v-if="message.role === 'system'" />
13-
<template v-else v-for="(part, index) of message.parts" :key="index">
14-
<Message v-if="part.type === 'text'" :content="part.text" />
15-
<tool-message
16-
v-else-if="part.type === 'tool-invocation'"
17-
:toolCall="part.toolInvocation"
18-
:askingPermission="askingPermission"
19-
@result-click="handleResultClick"
20-
@accept="acceptPermission"
21-
@reject="rejectPermission"
22-
/>
23-
</template>
3+
<div class="scroll-container">
4+
<h1 class="plugin-title">AI Shell</h1>
5+
<div class="chat-messages" ref="chatMessagesRef">
6+
<div
7+
v-for="message in messages"
8+
:key="message.id"
9+
:class="['message', message.role]"
10+
>
11+
<!-- TODO put this at the Message component -->
12+
<div class="message-content">
13+
<template v-if="message.role === 'system'" />
14+
<template v-else v-for="(part, index) of message.parts" :key="index">
15+
<Message v-if="part.type === 'text'" :content="part.text" />
16+
<tool-message
17+
v-else-if="part.type === 'tool-invocation'"
18+
:toolCall="part.toolInvocation"
19+
:askingPermission="askingPermission"
20+
@result-click="handleResultClick"
21+
@accept="acceptPermission"
22+
@reject="rejectPermission"
23+
/>
24+
</template>
25+
</div>
2426
</div>
25-
</div>
26-
<div
27-
class="message error"
28-
v-if="error && !error.message.includes('User rejected tool call')"
29-
>
30-
<div class="message-content">
31-
Something went wrong.
32-
<pre v-if="!isErrorTruncated || showFullError" v-text="error" />
33-
<pre v-else v-text="truncatedError" />
34-
<button
35-
v-if="isErrorTruncated"
36-
@click="showFullError = !showFullError"
37-
class="btn show-more-btn"
38-
>
39-
{{ showFullError ? "Show less" : "Show more" }}
40-
</button>
27+
<div
28+
class="message error"
29+
v-if="error && !error.message.includes('User rejected tool call')"
30+
>
31+
<div class="message-content">
32+
Something went wrong.
33+
<pre v-if="!isErrorTruncated || showFullError" v-text="error" />
34+
<pre v-else v-text="truncatedError" />
35+
<button
36+
v-if="isErrorTruncated"
37+
@click="showFullError = !showFullError"
38+
class="btn show-more-btn"
39+
>
40+
{{ showFullError ? "Show less" : "Show more" }}
41+
</button>
42+
</div>
43+
</div>
44+
<div
45+
class="spinner-container"
46+
:style="{ visibility: showSpinner ? 'visible' : 'hidden' }"
47+
>
48+
<span class="spinner" />
4149
</div>
4250
</div>
43-
<div
44-
class="spinner-container"
45-
:style="{ visibility: showSpinner ? 'visible' : 'hidden' }"
46-
>
47-
<span class="spinner" />
48-
</div>
51+
<div ref="bottomMarker"></div>
4952
</div>
50-
5153
<div class="chat-input-container">
5254
<textarea
5355
v-model="input"
@@ -87,7 +89,6 @@
8789
</button>
8890
<button v-else @click="stop" class="stop-btn" />
8991
</div>
90-
<div ref="bottomMarker"></div>
9192
</div>
9293
</div>
9394
</template>

‎src/components/ToolMessage.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
v-text="data.map((c) => c.name).join(', ')"
4242
/>)
4343
</template>
44-
<run-query-message
44+
<run-query-message-result
4545
v-else-if="toolCall.toolName === 'run_query' && data"
4646
:data="data"
4747
@result-click="$emit('result-click', $event)"
@@ -56,12 +56,12 @@ import Message from "./Message.vue";
5656
import { ToolCall } from "ai";
5757
import { PropType } from "vue";
5858
import { safeJSONStringify } from "../utils";
59-
import RunQueryMessage from "./toolMessage/RunQueryMessage.vue";
59+
import RunQueryMessageResult from "./toolMessage/RunQueryMessageResult.vue";
6060
import { isErrorContent, parseErrorContent } from "../utils";
6161
import _ from "lodash";
6262
6363
export default {
64-
components: { Message, RunQueryMessage },
64+
components: { Message, RunQueryMessageResult },
6565
props: {
6666
askingPermission: Boolean,
6767
toolCall: {

src/components/toolMessage/RunQueryMessage.vue renamed to src/components/toolMessage/RunQueryMessageResult.vue

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="run-query-message">
2+
<div class="run-query-message-result">
33
<span>
44
Query returned {{ rows.length }} {{ $pluralize('row', rows.length) }}
55
</span>
@@ -14,8 +14,17 @@
1414
</thead>
1515
<tbody>
1616
<tr v-for="(row, index) in limitedRows" :key="index">
17-
<td v-for="column in columns" :key="column">
18-
{{ row[column] }}
17+
<td
18+
v-for="column in columns"
19+
:key="column"
20+
:class="{
21+
'null-cell': row[column] === null,
22+
'empty-cell': row[column] === '',
23+
}"
24+
>
25+
<template v-if="row[column] === ''">(EMPTY)</template>
26+
<template v-else-if="row[column] === null">(NULL)</template>
27+
<template v-else>{{ row[column] }}</template>
1928
</td>
2029
</tr>
2130
<tr v-if="remainingRows > 0" class="remaining-rows">

0 commit comments

Comments
 (0)