import React, { useContext, useMemo } from "react";
import { I18nContext } from "../I18n";
import { CostMillis } from "./CostMillis";
/**
 * RagRetrievalInfo 组件显示搜索查询和检索结果。
 *
 * @param props - 组件的属性。
 * @param props.onMetaClick - 当元数据项被点击时的回调函数。
 * @param props.input - 包含搜索查询的输入数据。
 * @param props.category - 类别类型，用于确定是否显示检索结果。
 * @param props.output - 包含检索块的输出数据。
 * @param props.costMillis - 检索过程的耗时（毫秒）。
 *
 * @returns 显示搜索查询和检索结果的 JSX 元素。
 */ export var RagRetrievalInfo = function(props) {
    var i18n = useContext(I18nContext);
    return useMemo(function() {
        var _i18n_locale, _props_input_searchQueries, _props_input, _props_output_chunks, _props_output, _i18n_locale1, _Array_from, _props_output_chunks1, _props_output1;
        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
            style: {
                flex: 1,
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                padding: '8px 12px',
                gap: '10px',
                alignSelf: 'stretch',
                background: '#FBFCFD',
                zIndex: 1,
                borderRadius: '12px',
                flexWrap: 'wrap'
            }
        }, (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale = i18n.locale) === null || _i18n_locale === void 0 ? void 0 : _i18n_locale.queryKeyWords) || '检索查询', /*#__PURE__*/ React.createElement("div", {
            style: {
                display: 'flex',
                flexDirection: 'row',
                gap: '10px',
                borderRadius: '12px',
                flexWrap: 'wrap',
                maxWidth: '100%'
            }
        }, (_props_input = props.input) === null || _props_input === void 0 ? void 0 : (_props_input_searchQueries = _props_input.searchQueries) === null || _props_input_searchQueries === void 0 ? void 0 : _props_input_searchQueries.map(function(query, index) {
            return /*#__PURE__*/ React.createElement("div", {
                key: query + index,
                style: {
                    height: '24px',
                    borderRadius: '12px',
                    opacity: 1,
                    display: 'flex',
                    lineHeight: '24px',
                    padding: '1px 10px',
                    gap: '4px',
                    maxWidth: '100%',
                    background: '#FFFFFF',
                    zIndex: 0,
                    overflow: 'hidden',
                    textWrap: 'nowrap',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                }
            }, query);
        }))), ((_props_output = props.output) === null || _props_output === void 0 ? void 0 : (_props_output_chunks = _props_output.chunks) === null || _props_output_chunks === void 0 ? void 0 : _props_output_chunks.length) ? /*#__PURE__*/ React.createElement("pre", {
            style: {
                display: 'flex',
                flexDirection: 'column',
                padding: '8px 12px',
                gap: '10px',
                alignSelf: 'stretch',
                background: '#FBFCFD',
                zIndex: 1,
                borderRadius: '12px'
            }
        }, /*#__PURE__*/ React.createElement("div", {
            style: {
                display: 'flex',
                gap: '10px',
                alignItems: 'center'
            }
        }, /*#__PURE__*/ React.createElement("span", null, (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale1 = i18n.locale) === null || _i18n_locale1 === void 0 ? void 0 : _i18n_locale1.searchResults) || '检索结果', " "), /*#__PURE__*/ React.createElement(CostMillis, {
            costMillis: props.costMillis
        })), /*#__PURE__*/ React.createElement("div", {
            style: {
                display: 'flex',
                flexDirection: 'row',
                gap: '4px',
                flexWrap: 'wrap',
                borderRadius: '12px'
            }
        }, (_Array_from = Array.from(new Set((_props_output1 = props.output) === null || _props_output1 === void 0 ? void 0 : (_props_output_chunks1 = _props_output1.chunks) === null || _props_output_chunks1 === void 0 ? void 0 : _props_output_chunks1.map(function(query) {
            var _query_docMeta;
            return (_query_docMeta = query.docMeta) === null || _query_docMeta === void 0 ? void 0 : _query_docMeta.doc_name;
        })))) === null || _Array_from === void 0 ? void 0 : _Array_from.map(function(query, index) {
            var _props_output_chunks, _props_output, _chunk_docMeta;
            var chunk = (_props_output = props.output) === null || _props_output === void 0 ? void 0 : (_props_output_chunks = _props_output.chunks) === null || _props_output_chunks === void 0 ? void 0 : _props_output_chunks.find(function(item) {
                var _item_docMeta;
                return ((_item_docMeta = item.docMeta) === null || _item_docMeta === void 0 ? void 0 : _item_docMeta.doc_name) === query;
            });
            return /*#__PURE__*/ React.createElement("div", {
                key: "".concat(query, "-").concat(index),
                style: {
                    height: '32px',
                    borderRadius: '6px',
                    opacity: 1,
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                    padding: '4px 10px',
                    gap: '8px',
                    background: '#FFFFFF',
                    zIndex: 0,
                    width: 'max-content',
                    maxWidth: 'min(860px,100%)'
                },
                onClick: function() {
                    var _props_onMetaClick;
                    if (!chunk) return;
                    (_props_onMetaClick = props.onMetaClick) === null || _props_onMetaClick === void 0 ? void 0 : _props_onMetaClick.call(props, chunk.docMeta);
                }
            }, /*#__PURE__*/ React.createElement("span", null, query || (chunk === null || chunk === void 0 ? void 0 : (_chunk_docMeta = chunk.docMeta) === null || _chunk_docMeta === void 0 ? void 0 : _chunk_docMeta.answer)));
        }))) : null);
    }, [
        props.category,
        JSON.stringify(props.info),
        JSON.stringify(props.output),
        JSON.stringify(props.input),
        props.costMillis,
        props.isFinished
    ]);
};
