ChatContainer.tsx 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. // dashboard-v4/dashboard/src/components/chat/ChatContainer.tsx
  2. import { useChatData } from "../../hooks/useChatData";
  3. import { SessionGroup } from "./SessionGroup";
  4. import { ChatInput } from "./ChatInput";
  5. import { StreamingMessage } from "./StreamingMessage";
  6. import "./style.css";
  7. interface ChatContainerProps {
  8. chatId: string;
  9. }
  10. export function ChatContainer({ chatId }: ChatContainerProps) {
  11. const { chatState, actions } = useChatData(chatId);
  12. return (
  13. <div className="chat-container">
  14. <div className="messages-area">
  15. {chatState.session_groups.map((session) => (
  16. <SessionGroup
  17. key={session.session_id}
  18. session={session}
  19. onVersionSwitch={actions.switchVersion}
  20. onRefresh={actions.refreshResponse}
  21. onEdit={actions.editMessage}
  22. onRetry={actions.retryMessage}
  23. onLike={actions.likeMessage}
  24. onDislike={actions.dislikeMessage}
  25. onCopy={actions.copyMessage}
  26. onShare={actions.shareMessage}
  27. />
  28. ))}
  29. {/* 流式消息显示 */}
  30. {chatState.streaming_message && (
  31. <StreamingMessage
  32. content={chatState.streaming_message}
  33. sessionId={chatState.streaming_session_id}
  34. />
  35. )}
  36. {/* 错误提示 */}
  37. {chatState.error && (
  38. <div className="error-message">{chatState.error}</div>
  39. )}
  40. </div>
  41. <ChatInput
  42. onSend={(content) => actions.editMessage("new", content)}
  43. onModelChange={actions.setModel}
  44. disabled={chatState.is_loading}
  45. placeholder="输入你的问题..."
  46. />
  47. </div>
  48. );
  49. }