diff --git a/web/src/components/Chat/ChatContent.tsx b/web/src/components/Chat/ChatContent.tsx index 2f2552db..c73d91f5 100644 --- a/web/src/components/Chat/ChatContent.tsx +++ b/web/src/components/Chat/ChatContent.tsx @@ -2,15 +2,20 @@ * @Author: ZhaoYing * @Date: 2025-12-10 16:46:17 * @Last Modified by: ZhaoYing - * @Last Modified time: 2026-03-18 20:48:03 + * @Last Modified time: 2026-03-19 10:37:01 */ import { type FC, useRef, useEffect, useState } from 'react' import clsx from 'clsx' import Markdown from '@/components/Markdown' import type { ChatContentProps } from './types' -import { Spin, Divider, Space } from 'antd' +import { Spin, Divider, Space, Image, Flex } from 'antd' import { SoundOutlined } from '@ant-design/icons' + +const getFileUrl = (file: any) => { + return file.thumbUrl || file.url || (file.originFileObj ? URL.createObjectURL(file.originFileObj) : undefined) +} + /** * Chat Content Display Component * Responsible for rendering chat message list, supports different role message styles and auto-scrolling @@ -54,8 +59,8 @@ const ChatContent: FC = ({ const handleScroll = () => { if (scrollContainerRef.current) { const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current; - // Consider user is at bottom if within 20px of the bottom - isScrolledToBottomRef.current = scrollHeight - scrollTop - clientHeight < 20; + // Consider user is at bottom if within 100px of the bottom + isScrolledToBottomRef.current = scrollHeight - scrollTop - clientHeight < 100; } }; @@ -83,11 +88,16 @@ const ChatContent: FC = ({ // Auto-scroll if data length changed OR user is currently at bottom if (data.length !== prevDataLengthRef.current || isScrolledToBottomRef.current) { scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight; + isScrolledToBottomRef.current = true; } prevDataLengthRef.current = data.length; } }, 0); }, [data]) + + const handleDownload = (file: any) => { + window.open(getFileUrl(file), '_blank') + } return (
{data.length === 0 @@ -108,48 +118,44 @@ const ChatContent: FC = ({ {labelFormat(item)}
} - {item.meta_data?.files && item.meta_data?.files.length > 0 &&
+ {item.meta_data?.files && item.meta_data?.files.length > 0 && {item.meta_data?.files?.map((file) => { if (file.type.includes('image')) { return (
- {file.name} + {file.name}
) } if (file.type.includes('video')) { return ( -
-