ToolMessage.tsx 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. import { Collapse } from "antd";
  2. import type { SessionInfo } from "../../types/chat"
  3. import { getArgs, type WikipaliSearchResponse } from "../../types/search"
  4. import SearchResults from "./SearchResults";
  5. const { Panel } = Collapse;
  6. interface IWidget {
  7. session?: SessionInfo;
  8. }
  9. const ToolMessage = ({ session }: IWidget) => {
  10. console.debug("ai chat render", session);
  11. //找到llm请求的message 可能有多个
  12. const toolCallMessages = session?.messages.filter((msg) => msg.tool_calls);
  13. return (
  14. <div key={"tool_calls"} className="tool-result">
  15. {toolCallMessages?.map((msg, index) => {
  16. return (
  17. <Collapse key={index} style={{ borderRadius: 12 }}>
  18. {msg.tool_calls?.map((tool) => {
  19. //找到对应的结果
  20. const search = session?.messages.find(
  21. (msg) => msg.tool_call_id === tool.id
  22. );
  23. if (!search?.content) {
  24. return <>没有结果</>;
  25. } else {
  26. const searchResult = getArgs<WikipaliSearchResponse>(
  27. search.content
  28. );
  29. return (
  30. search?.content && (
  31. <Panel
  32. header={`${tool?.function.name} ${tool?.function.arguments}`}
  33. key="1"
  34. extra={<>{`${searchResult.hits.total.value}个结果`}</>}
  35. >
  36. <div className="tool-content">
  37. <SearchResults data={searchResult} />
  38. </div>
  39. </Panel>
  40. )
  41. );
  42. }
  43. })}
  44. </Collapse>
  45. );
  46. })}
  47. </div>
  48. );
  49. };
  50. export default ToolMessage;