Skip to content

Commit c2e2c7c

Browse files
committed
chore: fix chat scroll
1 parent 67d7ab7 commit c2e2c7c

File tree

3 files changed

+29
-13
lines changed

3 files changed

+29
-13
lines changed

client/src/pages/FinanceAnalysis.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -285,9 +285,10 @@ export default function FinanceAnalysis() {
285285
{/* Page Header */}
286286
{chatBot.messages.length > 1 && <ChatHeaderTemplate messages={chatBot.messages} />}
287287
{/* Conversation Area */}
288-
<div className={`finance-analysis-chat-wrapper k-d-flex k-flex-column k-flex-1 k-p-6 k-gap-8 chat-wrapper ${chatBot.messages.length <= 1 ? 'show-gradient' : ''}`}>
288+
<div className={`finance-analysis-chat-wrapper k-d-flex k-flex-column k-flex-1 k-p-6 k-gap-8 chat-wrapper ${chatBot.messages.length <= 1 ? 'show-gradient' : ''}`} style={{ minHeight: 0 }}>
289289
<div
290-
className={`k-d-flex k-flex-column k-align-items-center k-justify-content-flex-end k-h-full ${chatBot.messages.length > 1 ? "finance-analysis-chat-wrapper-conversation" : ""}`}
290+
className={`k-d-flex k-flex-column k-align-items-center k-h-full ${chatBot.messages.length > 1 ? "finance-analysis-chat-wrapper-conversation" : ""}`}
291+
style={chatBot.messages.length > 1 ? { minHeight: 0 } : { justifyContent: 'flex-end', paddingBottom: '64px' }}
291292
>
292293
{renderChat()}
293294
</div>
@@ -299,9 +300,9 @@ export default function FinanceAnalysis() {
299300
<div className="finance-preview-wrapper k-overflow-auto preview-wrapper k-d-flex k-flex-col">
300301
{/* Page Header */}
301302
<ChatHeaderTemplate messages={chatBot.messages} />
302-
<div className="k-d-grid k-grid-cols-1 k-grid-cols-xl-2 preview k-flex-1">
303+
<div className="k-d-grid k-grid-cols-1 k-grid-cols-xl-2 preview k-flex-1" style={{ minHeight: 0 }}>
303304
{/* Left Panel - Chat (393px) */}
304-
<div className="k-align-self-end k-d-none k-d-xl-flex chat-preview k-pos-relative">
305+
<div className="k-d-none k-d-xl-flex chat-preview k-pos-relative" style={{ minHeight: 0}}>
305306
{renderChat()}
306307
</div>
307308

client/src/pages/KnowledgeAssistant.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,15 +60,15 @@ const KnowledgeAssistant = () => {
6060
)}
6161
{hasConversationStarted && <ChatHeaderTemplate messages={chatBot.messages} />}
6262
{/* Chat Component */}
63-
<div className={`knowledge-assistant-conversation k-d-flex k-flex-column k-flex-1 k-align-items-center k-w-full conversation-container ${hasConversationStarted ? 'knowledge-assistant-conversation-started' : ''}`}>
63+
<div className={`knowledge-assistant-conversation k-d-flex k-flex-column k-flex-1 k-align-items-center k-w-full conversation-container ${hasConversationStarted ? 'knowledge-assistant-conversation-started' : ''}`} style={hasConversationStarted ? { minHeight: 0 } : { justifyContent: 'flex-end', paddingBottom: '64px' }}>
6464
<div className={`knowledge-assistant-chat-wrapper chat-content-wrapper k-w-full k-d-flex k-flex-column k-pos-relative ${!hasConversationStarted ? 'show-gradient' : ''} ${hasConversationStarted ? 'knowledge-assistant-chat-flex-full' : 'knowledge-assistant-chat-flex-none'}`}>
6565
<Chat
6666
messages={hasConversationStarted ? chatBot.messages.slice(1) : chatBot.messages}
6767
authorId={chatBot.user.id}
6868
onSendMessage={chatBot.addNewMessage}
6969
placeholder="Try a suggestion or ask about KendoReact"
7070
className="k-border-transparent"
71-
height={hasConversationStarted ? "100%" : undefined}
71+
height="100%"
7272
messageTemplate={ChatMessage}
7373
timestampTemplate={() => null }
7474
showUsername={false}

client/src/styles/styles.css

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ html, body, #root {
190190
}
191191

192192
.k-drawer-wrapper::after,
193-
.preview .charts-preview:before {
193+
.preview .chat-preview:before {
194194
content: "";
195195
display: block;
196196
height: 100%;
@@ -204,11 +204,12 @@ html, body, #root {
204204
border-radius: 815px;
205205
pointer-events: none;
206206
}
207-
.k-drawer-wrapper::after {
207+
.k-drawer-wrapper::after,
208+
.preview .chat-preview:before {
208209
right: 0;
209210
}
210-
.preview .charts-preview:before {
211-
left: -60px;
211+
.preview .chat-preview:before {
212+
right: -80px;
212213
}
213214

214215
.user-selection-wrapper:after,
@@ -353,12 +354,11 @@ html, body, #root {
353354
display: none;
354355
}
355356

356-
.k-chat .k-message-list {
357+
.k-chat .k-message-list-content {
357358
justify-content: flex-end;
358-
359+
min-height: 100%;
359360
}
360361

361-
362362
.finance-analysis-chat-default .k-message-list {
363363
padding-block: 64px;
364364
}
@@ -1101,13 +1101,25 @@ html, body, #root {
11011101

11021102
.finance-preview-wrapper {
11031103
height: calc(100vh - 54px);
1104+
overflow: hidden;
1105+
}
1106+
1107+
.finance-analysis-chat-expanded {
1108+
display: flex;
1109+
flex-direction: column;
1110+
height: 100%;
1111+
overflow-y: auto;
11041112
}
11051113

1114+
1115+
1116+
11061117
.finance-charts-preview {
11071118
border: 1px solid #FFF;
11081119
background: rgba(255, 255, 255, 0.50);
11091120
box-shadow: 0 4px 12px 0 rgba(13, 10, 44, 0.08);
11101121
backdrop-filter: blur(2px);
1122+
overflow-y: auto;
11111123
}
11121124

11131125
.finance-charts-container {
@@ -1205,6 +1217,7 @@ html, body, #root {
12051217

12061218
.knowledge-assistant-conversation {
12071219
box-sizing: border-box;
1220+
min-height: 0;
12081221
}
12091222

12101223
.knowledge-assistant-conversation-started {
@@ -1218,6 +1231,8 @@ html, body, #root {
12181231

12191232
.knowledge-assistant-chat-flex-full {
12201233
flex: 1;
1234+
min-height: 0;
1235+
height: 100%;
12211236
}
12221237

12231238
.knowledge-assistant-chat-flex-none {

0 commit comments

Comments
 (0)