Skip to content

Commit eeb4366

Browse files
PhineasePhinease
authored
🐛 Bugfix: some long text titles cause the traceability result component to be too wide #239 
2 parents 1593c99 + 82427c5 commit eeb4366

File tree

2 files changed

+83
-60
lines changed

2 files changed

+83
-60
lines changed

‎frontend/app/chat/layout/chatRightPanel.tsx‎

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ export function ChatRightPanel({
217217
const source_type = result.source_type || "url";
218218

219219
return (
220-
<div className="p-3 rounded-lg border border-gray-200 text-xs hover:bg-gray-50 transition-colors">
220+
<div className="p-3 rounded-lg border border-gray-200 text-xs hover:bg-gray-50 transition-colors overflow-hidden">
221221
<div className="flex flex-col">
222222
<div>
223223
{source_type === "url" ? (
@@ -226,13 +226,31 @@ export function ChatRightPanel({
226226
target="_blank"
227227
rel="noopener noreferrer"
228228
className="font-medium text-blue-600 hover:underline block text-base"
229+
style={{
230+
display: '-webkit-box',
231+
WebkitLineClamp: 2,
232+
WebkitBoxOrient: 'vertical',
233+
overflow: 'hidden',
234+
wordBreak: 'break-word'
235+
}}
236+
title={title}
229237
>
230238
{title}
231239
</a>
232240
) : (
233-
<span className="font-medium block text-base">
241+
<div
242+
className="font-medium text-base"
243+
style={{
244+
display: '-webkit-box',
245+
WebkitLineClamp: 2,
246+
WebkitBoxOrient: 'vertical',
247+
overflow: 'hidden',
248+
wordBreak: 'break-word'
249+
}}
250+
title={title}
251+
>
234252
{title}
235-
</span>
253+
</div>
236254
)}
237255

238256
{published_date && (
@@ -249,15 +267,22 @@ export function ChatRightPanel({
249267
</div>
250268

251269
<div className="mt-2 text-sm flex justify-between items-center">
252-
<div className="flex items-center min-w-0 flex-1">
270+
<div className="flex items-center overflow-hidden" style={{flex: 1, minWidth: 0}}>
253271
<div className="w-3 h-3 flex-shrink-0 mr-1">
254272
{source_type === "url" ? (
255273
<ExternalLink className="w-full h-full" />
256274
) : source_type === "file" ? (
257275
<Database className="w-full h-full" />
258276
) : null}
259277
</div>
260-
<span className="text-gray-500 truncate">
278+
<span
279+
className="text-gray-500 truncate"
280+
style={{
281+
maxWidth: '75%',
282+
display: 'inline-block'
283+
}}
284+
title={formatUrl(result)}
285+
>
261286
{formatUrl(result)}
262287
</span>
263288
</div>
@@ -311,7 +336,7 @@ export function ChatRightPanel({
311336
return (
312337
<div className={`transition-all duration-300 ease-in-out ${
313338
isVisible ? 'lg:block w-[400px]' : 'lg:block w-0 opacity-0'
314-
} hidden border-l bg-background relative`}>
339+
} hidden border-l bg-background relative`} style={{maxWidth: '400px', overflow: 'hidden'}}>
315340
{/* Image viewer modal */}
316341
{viewingImage && (
317342
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80" onClick={() => setViewingImage(null)}>
@@ -343,7 +368,7 @@ export function ChatRightPanel({
343368
</div>
344369
)}
345370

346-
<div className="flex-none sticky top-0 z-20 flex items-center justify-between border-b p-2 bg-gray-50">
371+
<div className="flex-none sticky top-0 z-20 flex items-center justify-between border-b p-2 bg-gray-50" style={{maxWidth: '400px', overflow: 'hidden'}}>
347372
<div className="flex items-center space-x-1">
348373
<h3 className="text-sm font-semibold text-gray-800 pl-2">
349374
网页 · 知识库搜索
@@ -363,8 +388,8 @@ export function ChatRightPanel({
363388
)}
364389
</div>
365390

366-
<Tabs defaultValue="sources">
367-
<TabsList className="w-full">
391+
<Tabs defaultValue="sources" style={{maxWidth: '400px', overflow: 'hidden'}}>
392+
<TabsList className="w-full" style={{maxWidth: '400px'}}>
368393
<TabsTrigger value="sources" className="flex-1">
369394
来源
370395
{searchResults.length > 0 && (
@@ -383,12 +408,12 @@ export function ChatRightPanel({
383408
</TabsTrigger>
384409
</TabsList>
385410

386-
<StaticScrollArea className="h-[calc(100vh-120px)]">
387-
<TabsContent value="sources" className="p-4">
388-
<div className="space-y-2">
411+
<StaticScrollArea className="h-[calc(100vh-120px)]" style={{maxWidth: '400px', overflow: 'hidden'}}>
412+
<TabsContent value="sources" className="p-4" style={{maxWidth: '400px', overflow: 'hidden'}}>
413+
<div className="space-y-2" style={{maxWidth: '100%', overflow: 'hidden'}}>
389414
{searchResults.length > 0 ? (
390415
<>
391-
<div className="space-y-3">
416+
<div className="space-y-3" style={{maxWidth: '100%', overflow: 'hidden'}}>
392417
{searchResults.map((result, index) => (
393418
<SearchResultItem
394419
key={`result-${index}`}
@@ -406,7 +431,7 @@ export function ChatRightPanel({
406431
</div>
407432
</TabsContent>
408433

409-
<TabsContent value="images" className="p-4">
434+
<TabsContent value="images" className="p-4" style={{maxWidth: '400px', overflow: 'hidden'}}>
410435
{processedImages.length > 0 ? (
411436
<>
412437
<div className="grid grid-cols-2 gap-2">

‎frontend/app/chat/streaming/taskWindow.tsx‎

Lines changed: 44 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const messageHandlers: MessageHandler[] = [
4747
color: "#6b7280",
4848
fontWeight: 500,
4949
borderRadius: "0.25rem",
50-
paddingTop: "0.2rem"
50+
paddingTop: "0.5rem"
5151
}}>
5252
<span>{message.content}</span>
5353
</div>
@@ -162,8 +162,7 @@ const messageHandlers: MessageHandler[] = [
162162
<div style={{
163163
fontSize: "0.875rem",
164164
color: "#6b7280",
165-
fontWeight: 500,
166-
paddingTop: "0.15rem"
165+
fontWeight: 500
167166
}}>
168167
阅读检索结果
169168
</div>
@@ -462,8 +461,7 @@ const messageHandlers: MessageHandler[] = [
462461
<div style={{
463462
fontSize: "0.875rem",
464463
color: "#6b7280",
465-
fontWeight: 500,
466-
paddingTop: "0.15rem"
464+
fontWeight: 500
467465
}}>
468466
阅读检索结果
469467
</div>
@@ -594,8 +592,7 @@ const messageHandlers: MessageHandler[] = [
594592
lineHeight: 1.5,
595593
color: "#dc2626",
596594
fontWeight: 500,
597-
borderRadius: "0.25rem",
598-
paddingTop: "0.2rem"
595+
borderRadius: "0.25rem"
599596
}}>
600597
<span>{message.content}</span>
601598
</div>
@@ -778,48 +775,49 @@ export function TaskWindow({
778775
}
779776

780777
return (
781-
<div className="relative pl-3">
782-
{groupedMessages.length > 1 && (
783-
<div className="absolute left-1.5 top-[0.65rem] bottom-[0.65rem] w-0.5 bg-gray-200"></div>
784-
)}
778+
<div className="relative">
779+
<div className="absolute left-[0.2rem] top-[1.25rem] bottom-0 w-0.5 bg-gray-200"></div>
785780

786781
{groupedMessages.map((group, groupIndex) => {
787782
const message = group.message;
788783
const isBlinking = shouldBlinkDot(message, groupIndex, groupedMessages.map(g => g.message));
789784

790785
return (
791786
<div key={message.id || groupIndex} className="relative mb-5">
792-
{/* Dot - add blinking effect based on condition */}
793-
<div className="absolute left-[-9px] top-[0.55rem]">
794-
<div
795-
className={isBlinking ? "blinkingDot" : ""}
796-
style={isBlinking ? {
797-
width: "0.5rem",
798-
height: "0.5rem",
799-
borderRadius: "9999px"
800-
} : {
801-
width: "0.5rem",
802-
height: "0.5rem",
803-
borderRadius: "9999px",
804-
backgroundColor: message.type === "virtual" ? "transparent" : "#9ca3af"
805-
}}
806-
></div>
807-
</div>
808-
809-
{/* Message content */}
810-
<div className="ml-3 text-sm break-words">
811-
{renderMessageContent(message)}
787+
{/* 使用flex布局确保圆点与文本内容对齐 */}
788+
<div className="flex items-start">
789+
{/* 圆点容器 */}
790+
<div className="flex-shrink-0 mr-3" style={{ position: "relative", top: "0.95rem" }}>
791+
<div
792+
className={isBlinking ? "blinkingDot" : ""}
793+
style={isBlinking ? {
794+
width: "0.5rem",
795+
height: "0.5rem",
796+
borderRadius: "9999px"
797+
} : {
798+
width: "0.5rem",
799+
height: "0.5rem",
800+
borderRadius: "9999px",
801+
backgroundColor: message.type === "virtual" ? "transparent" : "#9ca3af"
802+
}}
803+
></div>
804+
</div>
812805

813-
{/* Render card messages */}
814-
{group.cards.length > 0 && (
815-
<div className="mt-2">
816-
{group.cards.map((card, cardIndex) => (
817-
<div key={`card-${cardIndex}`} className="ml-0">
818-
{renderMessageContent(card)}
819-
</div>
820-
))}
821-
</div>
822-
)}
806+
{/* 消息内容 */}
807+
<div className="flex-1 text-sm break-words min-w-0">
808+
{renderMessageContent(message)}
809+
810+
{/* Render card messages */}
811+
{group.cards.length > 0 && (
812+
<div className="mt-2">
813+
{group.cards.map((card, cardIndex) => (
814+
<div key={`card-${cardIndex}`} className="ml-0">
815+
{renderMessageContent(card)}
816+
</div>
817+
))}
818+
</div>
819+
)}
820+
</div>
823821
</div>
824822
</div>
825823
);
@@ -830,11 +828,11 @@ export function TaskWindow({
830828

831829
// 计算容器高度：内容高度 + header高度，但不超过最大高度
832830
const maxHeight = 300
833-
const headerHeight = 40
831+
const headerHeight = 55
834832
const availableHeight = maxHeight - headerHeight
835-
const actualContentHeight = Math.min(contentHeight + 16, availableHeight) // +16 for padding
833+
const actualContentHeight = Math.min(contentHeight, availableHeight)
836834
const containerHeight = isExpanded ? headerHeight + actualContentHeight : 'auto'
837-
const needsScroll = contentHeight + 16 > availableHeight
835+
const needsScroll = contentHeight > availableHeight
838836

839837
return (
840838
<>
@@ -864,12 +862,12 @@ export function TaskWindow({
864862
<div className="px-4" style={{ height: `${actualContentHeight}px` }}>
865863
{needsScroll ? (
866864
<ScrollArea className="h-full" ref={scrollAreaRef}>
867-
<div className="pb-2" ref={contentRef}>
865+
<div className="" ref={contentRef}>
868866
{renderMessages()}
869867
</div>
870868
</ScrollArea>
871869
) : (
872-
<div className="pb-2" ref={contentRef}>
870+
<div className="" ref={contentRef}>
873871
{renderMessages()}
874872
</div>
875873
)}

0 commit comments

Comments
 (0)