@topthink/chat 1.0.24 → 1.0.25

package/es/index.js

@@ -1,4 +1,4 @@
-import*as e from"react";import{useCallback as r,useState as t,useImperativeHandle as o,memo as n,useMemo as i,useRef as a,createContext as s,useContext as l,Fragment as c,forwardRef as d,useEffect as m}from"react";import{useImmer as h,request as p,isRequestError as u,Lightbox as g,styled as f,Clipboard as b,css as v,formatSize as x,Tooltip as y,useAsync as k,isImageUrl as w}from"@topthink/components";import{jsx as j,jsxs as N,Fragment as z}from"react/jsx-runtime";import $ from"react-markdown";import"katex/dist/katex.min.css";import M from"remark-math";import C from"remark-breaks";import E from"remark-gfm";import q from"rehype-katex";import F from"rehype-highlight";import{Spinner as R}from"react-bootstrap";import*as _ from"path";import L from"path";import O from"react-textarea-autosize";import T from"use-resize-observer";function D(e){if((e=e.filter((e=>!!e.trim()))).length>3){const r=[...e];let t=e.length-3;for(;t--;){let e=Math.floor(Math.random()*r.length);r.splice(e,1)}e=r}return e}function A(e){return e.map((e=>({id:e.id,query:e.query,files:e.files||void 0,chunks:e.chunks.map((e=>{let{content:r="",error:t,tools:o=[]}=e;return{content:r,error:t,tools:o}})),annotation:e.annotation,stats:{usage:e.usage,latency:e.latency}})))}function P(e){let{url:n,onboarding:i,onSuccess:a,ref:s,transformRequest:l,...c}=e;const d=r((e=>{const r=[];if(i&&!1!==i.enable&&i.prologue){const e=D(i.questions);r.push({chunks:[{content:[i.prologue,...e.map((e=>`[${e}](#!question)`))].join("\n"),tools:[]}]})}return e?r.concat(A(e.messages||[])):r}),[i]),[m,g]=h((()=>d(c.conversation))),[f,b]=t(!1),[v,x]=t(c.conversation?.id),y=r((async function(e){let r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];if(e||r.length>0){b(!0),g((t=>{t.push({query:e,files:r,chunks:[],loading:!0})}));try{let t={method:"post",url:n,data:{query:e,files:r,conversation:v},onMessage:e=>{if(e.data)if("[DONE]"!=e.data)try{const r=JSON.parse(e.data);r.conversation?x(r.conversation):g((e=>{const t=e[e.length-1];if(t.chunks)if(r.chunks){const e=r.chunks.index;if(t.chunks[e]||(t.chunks[e]={content:"",tools:[]}),r.chunks.error)t.chunks[e].error=r.chunks.error;else if(r.chunks.tools){const o=r.chunks.tools.index;"response"in r.chunks.tools?(t.chunks[e].tools[o].response=r.chunks.tools.response,t.chunks[e].tools[o].error=r.chunks.tools.error,t.chunks[e].tools[o].content=r.chunks.tools.content):t.chunks[e].tools[o]={name:r.chunks.tools.name,title:r.chunks.tools.title,arguments:r.chunks.tools.arguments}}else r.chunks.content&&(t.chunks[e].content+=r.chunks.content)}else r.stats&&(t.stats=r.stats)}))}catch(e){console.error(e)}else g((e=>{e[e.length-1].loading=!1}))}};l&&(t=l("chat",t)),await p(t)}catch(e){let r="未知错误";u(e)&&(r=401==e.response?.status?"未授权或授权已过期，请刷新页面后重试":"string"==typeof e.errors?e.errors:Object.values(e.errors).join("\n")),g((e=>{const t=e[e.length-1];t.chunks&&(0===t.chunks.length?t.chunks=[{content:`[${r}]`,tools:[]}]:t.chunks[t.chunks.length-1].content=`[${r}]`),t.loading=!1}))}b(!1),a?.()}}),[l,v]),k=r((e=>{f||(x(e?.id),g(d(e)))}),[f,d]);return o(s,(()=>({reset:k,send:y}))),{messages:m,loading:f,send:y,reset:k}}const S=g.Image,B={pre:e=>{let{children:r}=e;const t=a(null);return N(X,{ref:t,children:[j(K,{tooltip:!1,content:()=>{const e=t.current?.getElementsByTagName("code");return e?.[0]?.innerText||""}}),r]})},a:e=>{let{node:r,href:t,...o}=e;const n=t?.startsWith("http")?"_blank":"_self";return j("a",{...o,href:t,target:n})},img:e=>{let{node:r,...t}=e;return j(S,{...t})}},I=[[M,{singleDollarTextMath:!1}],E,C],U=[q,[F,{detect:!1,ignoreMissing:!0}]],H=n((e=>{let{content:r,components:t}=e;return r=r.replace(/\\\(\s(.+?)\s\\\)/g,"$$$$ $1 $$$$"),j(J,{remarkPlugins:I,rehypePlugins:U,components:i((()=>({...B,...t})),[t]),children:r})})),K=f(b)`
+import*as e from"react";import{useCallback as t,useState as r,useImperativeHandle as n,memo as o,useMemo as i,useRef as a,createContext as s,useContext as l,Fragment as c,forwardRef as d,useEffect as m}from"react";import{useImmer as h,request as p,isRequestError as u,Lightbox as g,styled as f,Clipboard as b,css as x,formatSize as v,Tooltip as k,useAsync as y,isImageUrl as w}from"@topthink/components";import{jsx as j,jsxs as N,Fragment as z}from"react/jsx-runtime";import M from"react-markdown";import"katex/dist/katex.min.css";import $ from"remark-math";import q from"remark-breaks";import C from"remark-gfm";import E from"rehype-katex";import F from"rehype-highlight";import{codes as R,types as S}from"micromark-util-symbol";import{markdownLineEnding as D}from"micromark-util-character";import{Spinner as T}from"react-bootstrap";import*as _ from"path";import B from"path";import L from"react-textarea-autosize";import O from"use-resize-observer";function A(e){if((e=e.filter((e=>!!e.trim()))).length>3){const t=[...e];let r=e.length-3;for(;r--;){let e=Math.floor(Math.random()*t.length);t.splice(e,1)}e=t}return e}function P(e){return e.map((e=>({id:e.id,query:e.query,files:e.files||void 0,chunks:e.chunks.map((e=>{let{content:t="",error:r,tools:n=[]}=e;return{content:t,error:r,tools:n}})),annotation:e.annotation,stats:{usage:e.usage,latency:e.latency}})))}function I(e){let{url:o,onboarding:i,onSuccess:a,ref:s,transformRequest:l,...c}=e;const d=t((e=>{const t=[];if(i&&!1!==i.enable&&i.prologue){const e=A(i.questions);t.push({chunks:[{content:[i.prologue,...e.map((e=>`[${e}](#!question)`))].join("\n"),tools:[]}]})}return e?t.concat(P(e.messages||[])):t}),[i]),[m,g]=h((()=>d(c.conversation))),[f,b]=r(!1),[x,v]=r(c.conversation?.id),k=t((async function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];if(e||t.length>0){b(!0),g((r=>{r.push({query:e,files:t,chunks:[],loading:!0})}));try{let r={method:"post",url:o,data:{query:e,files:t,conversation:x},onMessage:e=>{if(e.data)if("[DONE]"!=e.data)try{const t=JSON.parse(e.data);t.conversation?v(t.conversation):g((e=>{const r=e[e.length-1];if(r.chunks)if(t.chunks){const e=t.chunks.index;if(r.chunks[e]||(r.chunks[e]={content:"",tools:[]}),t.chunks.error)r.chunks[e].error=t.chunks.error;else if(t.chunks.tools){const n=t.chunks.tools.index;"response"in t.chunks.tools?(r.chunks[e].tools[n].response=t.chunks.tools.response,r.chunks[e].tools[n].error=t.chunks.tools.error,r.chunks[e].tools[n].content=t.chunks.tools.content):r.chunks[e].tools[n]={name:t.chunks.tools.name,title:t.chunks.tools.title,arguments:t.chunks.tools.arguments}}else t.chunks.content&&(r.chunks[e].content+=t.chunks.content)}else t.stats&&(r.stats=t.stats)}))}catch(e){console.error(e)}else g((e=>{e[e.length-1].loading=!1}))}};l&&(r=l("chat",r)),await p(r)}catch(e){let t="未知错误";u(e)&&(t=401==e.response?.status?"未授权或授权已过期，请刷新页面后重试":"string"==typeof e.errors?e.errors:Object.values(e.errors).join("\n")),g((e=>{const r=e[e.length-1];r.chunks&&(0===r.chunks.length?r.chunks=[{content:`[${t}]`,tools:[]}]:r.chunks[r.chunks.length-1].content=`[${t}]`),r.loading=!1}))}b(!1),a?.()}}),[l,x]),y=t((e=>{f||(v(e?.id),g(d(e)))}),[f,d]);return n(s,(()=>({reset:y,send:k}))),{messages:m,loading:f,send:k,reset:y}}const U=function(e,t,r){function n(t){return t!==R.leftSquareBracket?(e.exit("citeMarker"),e.enter("citeData"),e.enter(S.chunkString,{contentType:"string"}),o(t)):(e.consume(t),n)}function o(n){return n===R.rightSquareBracket?(e.exit(S.chunkString),e.exit("citeData"),e.enter("citeMarker"),function(n){if(n!==R.rightSquareBracket)return r(n);return e.consume(n),e.exit("citeMarker"),e.exit("cite"),t(n)}(n)):D(n)||n===R.eof?r(n):(e.consume(n),o)}return function(t){return t!==R.leftSquareBracket?r(t):(e.enter("cite"),e.enter("citeMarker"),n(t))}},H=g.Image,K={pre:e=>{let{children:t}=e;const r=a(null);return N(Q,{ref:r,children:[j(G,{tooltip:!1,content:()=>{const e=r.current?.getElementsByTagName("code");return e?.[0]?.innerText||""}}),t]})},a:e=>{let{node:t,href:r,...n}=e;const o=r?.startsWith("http")?"_blank":"_self";return j("a",{...n,href:r,target:o})},img:e=>{let{node:t,...r}=e;return j(H,{...r})}},X=[[$,{singleDollarTextMath:!1}],C,q,function(){const e=this.data();e.micromarkExtensions.push({text:{[R.leftSquareBracket]:{tokenize:U}}}),e.fromMarkdownExtensions.push({enter:{cite:function(e){this.enter({type:"cite",data:{hName:"cite",hChildren:[{type:"text",value:""}]}},e)},citeData:function(){this.buffer()}},exit:{cite:function(e){this.exit(e)},citeData:function(){const e=this.resume();this.stack[this.stack.length-1].data.hChildren[0].value=e}}})}],J=[E,[F,{detect:!1,ignoreMissing:!0}]],W=o((e=>{let{content:t,components:r}=e;return t=t.replace(/\\\(\s(.+?)\s\\\)/g,"$$$$ $1 $$$$"),j(V,{remarkPlugins:X,rehypePlugins:J,components:i((()=>({...K,...r})),[r]),children:t})})),G=f(b)`
     position: absolute;
     right: 10px;
     top: 1em;
@@ -18,17 +18,17 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
     &:hover {
         opacity: 1;
     }
-`,X=f.pre`
+`,Q=f.pre`
     position: relative;
 
     &:hover {
-        ${K} {
+        ${G} {
             pointer-events: all;
             transform: translateX(0px);
             opacity: 0.5;
         }
     }
-`,J=f($)`
+`,V=f(M)`
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     line-height: 1.8;
@@ -298,7 +298,7 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
     .hljs-strong {
         font-weight: 700;
     }
-`,W=s(null);function G(){const e=l(W);if(!e)throw new Error("useContext must be used within a Provider");return e}function Q(e){let{children:r,...t}=e;return j(W.Provider,{value:t,children:r})}const V=g.Image;function Y(e){let{src:r,...t}=e;const{imageResolver:o}=G();return o&&r&&(r=o(r)),j(Z,{children:j(V,{src:r,...t})})}const Z=f.div`
+`,Y=s(null);function Z(){const e=l(Y);if(!e)throw new Error("useContext must be used within a Provider");return e}function ee(e){let{children:t,...r}=e;return j(Y.Provider,{value:r,children:t})}const te=g.Image;function re(e){let{src:t,...r}=e;const{imageResolver:n}=Z();return n&&t&&(t=n(t)),j(ne,{children:j(te,{src:t,...r})})}const ne=f.div`
     margin-bottom: .5rem;
     margin-top: .5rem;
     border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
@@ -323,9 +323,9 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
         max-height: 100%;
         max-width: 100%;
     }
-`;function ee(e){let{tool:r}=e;const[o,n]=t(!1),{logLevel:i="none"}=G();let a=null;r.content&&("string"==typeof r.content?a=j(H,{content:r.content}):"image"===r.content.type&&(a=j(Y,{src:r.content.image})));const s="response"in r;return N(c,{children:["stats"==i&&j("div",{className:"mb-2",children:N("div",{role:"button",className:"d-inline-flex align-items-center shadow-sm rounded bg-white p-1 px-2 fs-7 gap-2",children:[s?r.error?j("i",{className:"bi bi-x-circle-fill text-danger"}):j("i",{className:"bi bi-check-circle-fill text-success"}):j(R,{animation:"border",variant:"primary",size:"sm"}),j("span",{className:"text-muted",children:s?"已使用":"正在使用"}),j("span",{children:r.title})]})}),"all"==i&&j("div",{className:"mb-2",children:N("div",o&&s?{className:"shadow-sm rounded bg-white fs-7",children:[N("div",{onClick:()=>n(!1),role:"button",className:"d-flex align-items-center p-1 px-2 gap-2",children:[r.error?j("i",{className:"bi bi-x-circle-fill text-danger"}):j("i",{className:"bi bi-check-circle-fill text-success"}),j("span",{className:"text-muted",children:"已使用"}),j("span",{children:r.title}),j("i",{className:"bi bi-caret-up-fill text-muted"})]}),N("div",{className:"border-top p-2 d-flex flex-column gap-2",children:[N("div",{className:"border rounded bg-light",children:[j("div",{className:"d-flex align-items-center p-1 px-2 fs-7 gap-2",children:j("span",{className:"text-muted",children:"参数"})}),j("div",{className:"border-top p-2 overflow-hidden",children:r.arguments})]}),N("div",{className:"border rounded bg-light",children:[j("div",{className:"d-flex align-items-center p-1 px-2 fs-7 gap-2",children:j("span",{className:"text-muted",children:"响应"})}),j(re,{className:"border-top p-2 overflow-hidden",children:r.response||"None"})]})]})]}:{onClick:()=>n(s),role:"button",className:"d-inline-flex align-items-center shadow-sm rounded bg-white p-1 px-2 fs-7 gap-2",children:[s?r.error?j("i",{className:"bi bi-x-circle-fill text-danger"}):j("i",{className:"bi bi-check-circle-fill text-success"}):j(R,{animation:"border",variant:"primary",size:"sm"}),j("span",{className:"text-muted",children:s?"已使用":"正在使用"}),j("span",{children:r.title}),s&&j("i",{className:"bi bi-caret-down-fill text-muted"})]})}),a]})}const re=f.div`
+`;function oe(e){let{tool:t}=e;const[n,o]=r(!1),{logLevel:i="none"}=Z();let a=null;t.content&&("string"==typeof t.content?a=j(W,{content:t.content}):"image"===t.content.type&&(a=j(re,{src:t.content.image})));const s="response"in t;return N(c,{children:["stats"==i&&j("div",{className:"mb-2",children:N("div",{role:"button",className:"d-inline-flex align-items-center shadow-sm rounded bg-white p-1 px-2 fs-7 gap-2",children:[s?t.error?j("i",{className:"bi bi-x-circle-fill text-danger"}):j("i",{className:"bi bi-check-circle-fill text-success"}):j(T,{animation:"border",variant:"primary",size:"sm"}),j("span",{className:"text-muted",children:s?"已使用":"正在使用"}),j("span",{children:t.title})]})}),"all"==i&&j("div",{className:"mb-2",children:N("div",n&&s?{className:"shadow-sm rounded bg-white fs-7",children:[N("div",{onClick:()=>o(!1),role:"button",className:"d-flex align-items-center p-1 px-2 gap-2",children:[t.error?j("i",{className:"bi bi-x-circle-fill text-danger"}):j("i",{className:"bi bi-check-circle-fill text-success"}),j("span",{className:"text-muted",children:"已使用"}),j("span",{children:t.title}),j("i",{className:"bi bi-caret-up-fill text-muted"})]}),N("div",{className:"border-top p-2 d-flex flex-column gap-2",children:[N("div",{className:"border rounded bg-light",children:[j("div",{className:"d-flex align-items-center p-1 px-2 fs-7 gap-2",children:j("span",{className:"text-muted",children:"参数"})}),j("div",{className:"border-top p-2 overflow-hidden",children:t.arguments})]}),N("div",{className:"border rounded bg-light",children:[j("div",{className:"d-flex align-items-center p-1 px-2 fs-7 gap-2",children:j("span",{className:"text-muted",children:"响应"})}),j(ie,{className:"border-top p-2 overflow-hidden",children:t.response||"None"})]})]})]}:{onClick:()=>o(s),role:"button",className:"d-inline-flex align-items-center shadow-sm rounded bg-white p-1 px-2 fs-7 gap-2",children:[s?t.error?j("i",{className:"bi bi-x-circle-fill text-danger"}):j("i",{className:"bi bi-check-circle-fill text-success"}):j(T,{animation:"border",variant:"primary",size:"sm"}),j("span",{className:"text-muted",children:s?"已使用":"正在使用"}),j("span",{children:t.title}),s&&j("i",{className:"bi bi-caret-down-fill text-muted"})]})}),a]})}const ie=f.div`
     white-space: pre-wrap;
-`;var te,oe,ne;function ie(){return ie=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},ie.apply(this,arguments)}const ae=r=>e.createElement("svg",ie({xmlns:"http://www.w3.org/2000/svg",width:20,height:10,fill:"#fff",viewBox:"0 0 120 30"},r),te||(te=e.createElement("circle",{cx:15,cy:15,r:15,fill:"#3c60ff"},e.createElement("animate",{attributeName:"r",begin:"0s",calcMode:"linear",dur:"0.8s",from:15,repeatCount:"indefinite",to:15,values:"15;9;15"}),e.createElement("animate",{attributeName:"fill-opacity",begin:"0s",calcMode:"linear",dur:"0.8s",from:1,repeatCount:"indefinite",to:1,values:"1;.5;1"}))),oe||(oe=e.createElement("circle",{cx:60,cy:15,r:9,fill:"#3c60ff",fillOpacity:.3},e.createElement("animate",{attributeName:"r",begin:"0s",calcMode:"linear",dur:"0.8s",from:9,repeatCount:"indefinite",to:9,values:"9;15;9"}),e.createElement("animate",{attributeName:"fill-opacity",begin:"0s",calcMode:"linear",dur:"0.8s",from:.5,repeatCount:"indefinite",to:.5,values:".5;1;.5"}))),ne||(ne=e.createElement("circle",{cx:105,cy:15,r:15,fill:"#3c60ff"},e.createElement("animate",{attributeName:"r",begin:"0s",calcMode:"linear",dur:"0.8s",from:15,repeatCount:"indefinite",to:15,values:"15;9;15"}),e.createElement("animate",{attributeName:"fill-opacity",begin:"0s",calcMode:"linear",dur:"0.8s",from:1,repeatCount:"indefinite",to:1,values:"1;.5;1"}))));const se=function(e){let{ext:r}=e;const{result:t}=k((async e=>(await function(e){switch(e){case"../../images/file/docx.svg":return import("./docx-nWXnlyT_.js");case"../../images/file/jpg.svg":return import("./jpg-6tBxSzWk.js");case"../../images/file/md.svg":return import("./md-GZ3HJPcw.js");case"../../images/file/pdf.svg":return import("./pdf-pVX1_E6T.js");case"../../images/file/png.svg":return import("./png-u0o1NMqQ.js");case"../../images/file/pptx.svg":return import("./pptx-Hprz0cON.js");case"../../images/file/txt.svg":return import("./txt-eHeCpvNO.js");case"../../images/file/xlsx.svg":return import("./xlsx-uOft-SV2.js");default:return new Promise((function(r,t){("function"==typeof queueMicrotask?queueMicrotask:setTimeout)(t.bind(null,new Error("Unknown variable dynamic import: "+e)))}))}}(`../../images/file/${e}.svg`)).default),[r]);return t?j("img",{width:30,height:30,src:t}):null};function le(e){let{className:r,name:t,size:o,loading:n,error:i,onRemove:a}=e;const s=L.extname(t).substring(1),l=N(he,{className:r,$error:!!i,children:[N(me,{children:[j(se,{ext:s}),n&&j(R,{variant:"primary"})]}),N(de,{children:[j("h4",{children:t}),j("p",{children:x(o,1)})]}),a&&j(ce,{onClick:e=>{e.preventDefault(),a()},children:j("i",{className:"bi bi-trash3"})})]});return i?j(y,{placement:"top",tooltip:i,children:l}):l}const ce=f.div`
+`;var ae,se,le;function ce(){return ce=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},ce.apply(this,arguments)}const de=t=>e.createElement("svg",ce({xmlns:"http://www.w3.org/2000/svg",width:20,height:10,fill:"#fff",viewBox:"0 0 120 30"},t),ae||(ae=e.createElement("circle",{cx:15,cy:15,r:15,fill:"#3c60ff"},e.createElement("animate",{attributeName:"r",begin:"0s",calcMode:"linear",dur:"0.8s",from:15,repeatCount:"indefinite",to:15,values:"15;9;15"}),e.createElement("animate",{attributeName:"fill-opacity",begin:"0s",calcMode:"linear",dur:"0.8s",from:1,repeatCount:"indefinite",to:1,values:"1;.5;1"}))),se||(se=e.createElement("circle",{cx:60,cy:15,r:9,fill:"#3c60ff",fillOpacity:.3},e.createElement("animate",{attributeName:"r",begin:"0s",calcMode:"linear",dur:"0.8s",from:9,repeatCount:"indefinite",to:9,values:"9;15;9"}),e.createElement("animate",{attributeName:"fill-opacity",begin:"0s",calcMode:"linear",dur:"0.8s",from:.5,repeatCount:"indefinite",to:.5,values:".5;1;.5"}))),le||(le=e.createElement("circle",{cx:105,cy:15,r:15,fill:"#3c60ff"},e.createElement("animate",{attributeName:"r",begin:"0s",calcMode:"linear",dur:"0.8s",from:15,repeatCount:"indefinite",to:15,values:"15;9;15"}),e.createElement("animate",{attributeName:"fill-opacity",begin:"0s",calcMode:"linear",dur:"0.8s",from:1,repeatCount:"indefinite",to:1,values:"1;.5;1"}))));const me=function(e){let{ext:t}=e;const{result:r}=y((async e=>(await function(e){switch(e){case"../../images/file/docx.svg":return import("./docx-nWXnlyT_.js");case"../../images/file/jpg.svg":return import("./jpg-6tBxSzWk.js");case"../../images/file/md.svg":return import("./md-GZ3HJPcw.js");case"../../images/file/pdf.svg":return import("./pdf-pVX1_E6T.js");case"../../images/file/png.svg":return import("./png-u0o1NMqQ.js");case"../../images/file/pptx.svg":return import("./pptx-Hprz0cON.js");case"../../images/file/txt.svg":return import("./txt-eHeCpvNO.js");case"../../images/file/xlsx.svg":return import("./xlsx-uOft-SV2.js");default:return new Promise((function(t,r){("function"==typeof queueMicrotask?queueMicrotask:setTimeout)(r.bind(null,new Error("Unknown variable dynamic import: "+e)))}))}}(`../../images/file/${e}.svg`)).default),[t]);return r?j("img",{width:30,height:30,src:r}):null};function he(e){let{className:t,name:r,size:n,loading:o,error:i,onRemove:a}=e;const s=B.extname(r).substring(1),l=N(fe,{className:t,$error:!!i,children:[N(ge,{children:[j(me,{ext:s}),o&&j(T,{variant:"primary"})]}),N(ue,{children:[j("h4",{children:r}),j("p",{children:v(n,1)})]}),a&&j(pe,{onClick:e=>{e.preventDefault(),a()},children:j("i",{className:"bi bi-trash3"})})]});return i?j(k,{placement:"top",tooltip:i,children:l}):l}const pe=f.div`
     width: 1.75rem;
     height: 1.75rem;
     align-items: center;
@@ -340,7 +340,7 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
         color: var(--bs-danger);
         background-color: var(--bs-danger-bg-subtle);
     }
-`,de=f.div`
+`,ue=f.div`
     flex: 1;
     overflow: hidden;
 
@@ -361,7 +361,7 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
         line-height: 20px;
         margin-bottom: 0;
     }
-`,me=f.div`
+`,ge=f.div`
     position: relative;
     width: 3rem;
     height: 3rem;
@@ -375,7 +375,7 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
         position: absolute;
     }
 
-`,he=f.div`
+`,fe=f.div`
     display: flex;
     gap: .5rem;
     padding: .5rem;
@@ -388,10 +388,10 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
         border-color: var(--bs-primary);
     }
 
-    ${e=>e.$error&&v`
+    ${e=>e.$error&&x`
         border-color: var(--bs-danger) !important;
     `}
-`;var pe=d((function(e,r){let{children:t,tooltip:o,onClick:n,...i}=e;const a=j(ue,{ref:r,onClick:n,...i,children:t});return o?j(y,{tooltip:o,placement:"top",children:a}):a}));const ue=f.div`
+`;var be=d((function(e,t){let{children:r,tooltip:n,onClick:o,...i}=e;const a=j(xe,{ref:t,onClick:o,...i,children:r});return n?j(k,{tooltip:n,placement:"top",children:a}):a}));const xe=f.div`
     align-items: center;
     justify-content: center;
     border-radius: .375rem;
@@ -415,12 +415,12 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
             background-color: var(--bs-gray-200);
         }
     }
-`,ge=n((e=>{let{message:r,actions:t,updater:o}=e;const{query:n,files:a=[],chunks:s,annotation:l}=r,{user:d,bot:m,logLevel:h="none"}=G(),p=i((()=>s?s.reduce((function(e,r){return e+r.content+"\n"+r.tools.reduce(((e,r)=>r.content&&"string"==typeof r.content?e+r.content+"\n":e),"")}),""):""),[s]);return N(z,{children:[(n||a.length>0)&&N(we,{$reverse:!0,children:[d&&j(ye,{children:j("img",{src:d.avatar})}),N(ke,{children:[n&&j(H,{content:n}),a.length>0&&a.map(((e,r)=>{let{name:t,size:o,path:n}=e;return w(n)?j(Y,{src:`/uploads/${n}`},r):j(be,{children:j(le,{name:t,size:o})},r)}))]})]}),s&&N(we,{children:[j(ye,{children:j("img",{src:m.avatar})}),N(ke,{children:[(n||a.length>0)&&N(ve,{children:[j(b,{placement:"top",content:p,as:pe,tooltip:!0}),t?.({Component:pe,message:r,content:p,setMessage:o})]}),j(xe,{children:["stats","all"].includes(h)&&r.stats&&N(z,{children:[N("span",{children:["耗时 ",r.stats.latency/1e3," 秒"]}),N("span",{children:["花费 Token ",r.stats.usage]})]})}),j(fe,{$deleted:!!l,children:s.length>0&&s.map(((e,r)=>N(c,{children:[e.content&&j(H,{content:e.content}),e.tools.map(((e,r)=>j(ee,{tool:e},r))),e.error&&j(H,{content:`[${e.error}]`})]},r)))}),l&&N("div",{children:[N("div",{className:"d-flex align-items-center",children:[j("span",{className:"fs-7 text-secondary me-2",children:"标注的答案"}),j("hr",{className:"flex-fill"})]}),j(H,{content:l.answer})]}),r.loading&&j(ae,{})]})]})]})})),fe=f.div`
-    ${e=>e.$deleted&&v`
+`,ve=o((e=>{let{message:t,actions:r,updater:n}=e;const{query:o,files:a=[],chunks:s,annotation:l}=t,{user:d,bot:m,logLevel:h="none"}=Z(),p=i((()=>s?s.reduce((function(e,t){return e+t.content+"\n"+t.tools.reduce(((e,t)=>t.content&&"string"==typeof t.content?e+t.content+"\n":e),"")}),""):""),[s]);return N(z,{children:[(o||a.length>0)&&N(Me,{$reverse:!0,children:[d&&j(Ne,{children:j("img",{src:d.avatar})}),N(ze,{children:[o&&j(W,{content:o}),a.length>0&&a.map(((e,t)=>{let{name:r,size:n,path:o}=e;return w(o)?j(re,{src:`/uploads/${o}`},t):j(ye,{children:j(he,{name:r,size:n})},t)}))]})]}),s&&N(Me,{children:[j(Ne,{children:j("img",{src:m.avatar})}),N(ze,{children:[(o||a.length>0)&&N(we,{children:[j(b,{placement:"top",content:p,as:be,tooltip:!0}),r?.({Component:be,message:t,content:p,setMessage:n})]}),j(je,{children:["stats","all"].includes(h)&&t.stats&&N(z,{children:[N("span",{children:["耗时 ",t.stats.latency/1e3," 秒"]}),N("span",{children:["花费 Token ",t.stats.usage]})]})}),j(ke,{$deleted:!!l,children:s.length>0&&s.map(((e,t)=>N(c,{children:[e.content&&j(W,{content:e.content}),e.tools.map(((e,t)=>j(oe,{tool:e},t))),e.error&&j(W,{content:`[${e.error}]`})]},t)))}),l&&N("div",{children:[N("div",{className:"d-flex align-items-center",children:[j("span",{className:"fs-7 text-secondary me-2",children:"标注的答案"}),j("hr",{className:"flex-fill"})]}),j(W,{content:l.answer})]}),t.loading&&j(de,{})]})]})]})})),ke=f.div`
+    ${e=>e.$deleted&&x`
         text-decoration-line: line-through;
         color: var(--bs-secondary);
     `}
-`,be=f.div`
+`,ye=f.div`
     width: 100%;
     margin-bottom: .5rem;
     margin-top: .5rem;
@@ -432,7 +432,7 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
     &:last-child {
         margin-bottom: 0;
     }
-`,ve=f.div`
+`,we=f.div`
     position: absolute;
     top: -1.1rem;
     right: 0;
@@ -440,7 +440,7 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
     gap: .5rem;
     opacity: 0;
     z-index: 1;
-`,xe=f.div`
+`,je=f.div`
     position: absolute;
     bottom: -1.4rem;
     left: 0;
@@ -453,7 +453,7 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
     display: flex;
     opacity: 0;
     z-index: 1;
-`,ye=f.div`
+`,Ne=f.div`
     width: 35px;
     height: 35px;
     border-radius: 50%;
@@ -463,7 +463,7 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
         width: 100%;
         height: 100%;
     }
-`,ke=f.div`
+`,ze=f.div`
     padding: .875rem;
     background-color: rgb(243, 243, 243);
     border-radius: var(--bs-border-radius-lg);
@@ -483,18 +483,18 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
     }
 
     &:hover {
-        ${xe}, ${ve} {
+        ${je}, ${we} {
             opacity: 1;
         }
     }
-`,we=f.div`
+`,Me=f.div`
     display: flex;
     justify-content: flex-start;
     padding: 1rem 0 1rem 0;
-    ${e=>e.$reverse&&v`
+    ${e=>e.$reverse&&x`
         flex-direction: row-reverse;
 
-        ${ke} {
+        ${ze} {
             background: rgba(var(--bs-primary-rgb), 0.1);
             margin-right: 10px;
             margin-left: 0;
@@ -509,15 +509,15 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
             }
         }
     `};
-`,je=[".txt",".md",".pdf",".docx",".xlsx",".pptx",".png",".jpg"];function Ne(e){let{chat:o,fileTypes:n,scrollRef:i,onMessages:s,minRows:l,toolbar:c,disabled:d,onLoading:g}=e;const f=a(null),b=a(null),[v,x]=t(""),[k,w]=h([]),[z,$]=t(!1),M=n&&n.length>0?n:je,{loading:C,messages:E,send:q}=P({...o,onSuccess(){requestAnimationFrame((()=>{f.current?.focus()})),o.onSuccess?.()}});m((()=>{s(E)}),[E]),m((()=>{g?.(C)}),[C]),m((()=>{!n&&k.length>0&&w([])}),[n]),m((()=>{const e=i.current;if(e&&q){const r=e=>{e.target instanceof HTMLAnchorElement&&"#!question"===e.target.hash&&(e.preventDefault(),q(e.target.text))};return e.addEventListener("click",r),()=>{e.removeEventListener("click",r)}}}),[i,q]);const F=r((e=>{let{target:r}=e;if(r.files){const e=Array.from(r.files).filter((e=>!!M.includes(_.extname(e.name))&&(!(e.size>20971520)&&e))).slice(0,6-k.length);w((r=>{r.push(...e.map((e=>({file:e}))))})),e.forEach((async e=>{try{const r=new FormData;r.set("file",e);let t={method:"POST",url:`${o.url}/upload`,data:r};o.transformRequest&&(t=o.transformRequest("upload",t));const n=await p(t);w((r=>{const t=r.find((r=>r.file===e));t&&(t.path=n.path)}))}catch(r){const t=u(r)?r.message:"unknown error";w((r=>{const o=r.find((r=>r.file===e));o&&(o.error=t)}))}}))}r.value=""}),[k,M]),R=k.flatMap((e=>{let{file:r,path:t}=e;return t?[{name:r.name,size:r.size,path:t}]:[]})),L=()=>{(v||R.length>0)&&(q(v,R),x(""),w([]))};return N(qe,{children:[c,N(Ee,{$focused:z&&!C,children:[k.length>0&&j($e,{children:k.map(((e,r)=>{let{file:t,error:o,path:n}=e;const i=void 0===o&&void 0===n;return j(ze,{name:t.name,size:t.size,error:o,loading:i,onRemove:()=>{w((e=>{const r=e.findIndex((e=>e.file===t));-1!==r&&e.splice(r,1)}))}},r)}))}),N(Ce,{children:[j(O,{disabled:C||d,ref:f,placeholder:"请输入你的问题, Enter+Shift换行, Enter发送",minRows:l,maxRows:5,value:v,onChange:e=>x(e.target.value),onKeyDown:e=>{"Enter"!==e.key||e.shiftKey||(e.preventDefault(),L())},onFocus:()=>$(!0),onBlur:()=>$(!1)}),n&&j(y,{tooltip:"可上传不超过6个小于20MB的文件",placement:"top",children:N(Me,{disabled:k.length>=6,onClick:()=>b.current?.click(),children:[j("input",{onChange:F,multiple:!0,accept:M.join(","),ref:b,type:"file",hidden:!0}),j("i",{className:"bi bi-file-earmark-arrow-up"})]})}),j(Me,{className:"text-primary",disabled:!v&&0===R.length,onClick:e=>{e.preventDefault(),L()},children:j("i",{className:"bi bi-send-fill"})})]})]})]})}const ze=f(le)`
+`,$e=[".txt",".md",".pdf",".docx",".xlsx",".pptx",".png",".jpg"];function qe(e){let{chat:n,fileTypes:o,scrollRef:i,onMessages:s,minRows:l,toolbar:c,disabled:d,onLoading:g}=e;const f=a(null),b=a(null),[x,v]=r(""),[y,w]=h([]),[z,M]=r(!1),$=o&&o.length>0?o:$e,{loading:q,messages:C,send:E}=I({...n,onSuccess(){requestAnimationFrame((()=>{f.current?.focus()})),n.onSuccess?.()}});m((()=>{s(C)}),[C]),m((()=>{g?.(q)}),[q]),m((()=>{!o&&y.length>0&&w([])}),[o]),m((()=>{const e=i.current;if(e&&E){const t=e=>{e.target instanceof HTMLAnchorElement&&"#!question"===e.target.hash&&(e.preventDefault(),E(e.target.text))};return e.addEventListener("click",t),()=>{e.removeEventListener("click",t)}}}),[i,E]);const F=t((e=>{let{target:t}=e;if(t.files){const e=Array.from(t.files).filter((e=>!!$.includes(_.extname(e.name))&&(!(e.size>20971520)&&e))).slice(0,6-y.length);w((t=>{t.push(...e.map((e=>({file:e}))))})),e.forEach((async e=>{try{const t=new FormData;t.set("file",e);let r={method:"POST",url:`${n.url}/upload`,data:t};n.transformRequest&&(r=n.transformRequest("upload",r));const o=await p(r);w((t=>{const r=t.find((t=>t.file===e));r&&(r.path=o.path)}))}catch(t){const r=u(t)?t.message:"unknown error";w((t=>{const n=t.find((t=>t.file===e));n&&(n.error=r)}))}}))}t.value=""}),[y,$]),R=y.flatMap((e=>{let{file:t,path:r}=e;return r?[{name:t.name,size:t.size,path:r}]:[]})),S=()=>{(x||R.length>0)&&(E(x,R),v(""),w([]))};return N(De,{children:[c,N(Se,{$focused:z&&!q,children:[y.length>0&&j(Ee,{children:y.map(((e,t)=>{let{file:r,error:n,path:o}=e;const i=void 0===n&&void 0===o;return j(Ce,{name:r.name,size:r.size,error:n,loading:i,onRemove:()=>{w((e=>{const t=e.findIndex((e=>e.file===r));-1!==t&&e.splice(t,1)}))}},t)}))}),N(Re,{children:[j(L,{disabled:q||d,ref:f,placeholder:"请输入你的问题, Enter+Shift换行, Enter发送",minRows:l,maxRows:5,value:x,onChange:e=>v(e.target.value),onKeyDown:e=>{"Enter"!==e.key||e.shiftKey||(e.preventDefault(),S())},onFocus:()=>M(!0),onBlur:()=>M(!1)}),o&&j(k,{tooltip:"可上传不超过6个小于20MB的文件",placement:"top",children:N(Fe,{disabled:y.length>=6,onClick:()=>b.current?.click(),children:[j("input",{onChange:F,multiple:!0,accept:$.join(","),ref:b,type:"file",hidden:!0}),j("i",{className:"bi bi-file-earmark-arrow-up"})]})}),j(Fe,{className:"text-primary",disabled:!x&&0===R.length,onClick:e=>{e.preventDefault(),S()},children:j("i",{className:"bi bi-send-fill"})})]})]})]})}const Ce=f(he)`
     width: calc((100% - .75rem) / 2);
-`,$e=f.div`
+`,Ee=f.div`
     display: flex;
     flex-wrap: wrap;
     padding: .75rem;
     gap: .75rem;
     border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
-`,Me=f.button`
+`,Fe=f.button`
     color: var(--bs-secondary);
     cursor: pointer;
     display: flex;
@@ -539,7 +539,7 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
         background-color: var(--bs-gray-200);
     }
 
-`,Ce=f.div`
+`,Re=f.div`
     display: flex;
     padding: .5rem .5rem .5rem 1rem;
     gap: .25rem;
@@ -556,21 +556,21 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
             color: rgba(54, 54, 54, .3);
         }
     }
-`,Ee=f.div`
+`,Se=f.div`
     background: #FFF;
     border: var(--bs-border-width) var(--bs-border-style) ${e=>e.$focused?"var(--bs-primary)":"var(--bs-border-color)"};
     border-radius: var(--bs-border-radius-lg);
     box-shadow: 0.125rem 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
-`,qe=f.div`
+`,De=f.div`
     margin: 0 1rem 1rem;
-`;function Fe(e){let{className:o,bot:n,user:i,input:s,logLevel:l,imageResolver:c,placeholder:d,actions:p,...u}=e;const[f,b]=h((()=>A(u.messages||[]))),[v,x]=t(!1),y=a(!s),k=a(null),w=r((()=>{const e=k.current;e&&requestAnimationFrame((()=>{e.scrollTo({top:e.scrollHeight})}))}),[]),{ref:z,height:$}=T();return m((()=>{!v&&y.current||(v&&(y.current=!0),w())}),[$,v,y]),j(Q,{bot:n,user:i,logLevel:l,imageResolver:c,children:j(Le,{className:o,children:N(g,{children:[j(Re,{ref:k,children:N(_e,{ref:z,children:[0===f.length&&d,f.map(((e,r)=>j(ge,{actions:p,message:e,updater:r=>{b((t=>{const o=t.findIndex((r=>r.id===e.id));-1!==o&&r(t[o])}))}},r)))]})}),s&&j(Ne,{onMessages:b,scrollRef:k,onLoading:x,...s})]})})})}const Re=f.div`
+`;function Te(e){let{className:n,bot:o,user:i,input:s,logLevel:l,imageResolver:c,placeholder:d,actions:p,...u}=e;const[f,b]=h((()=>P(u.messages||[]))),[x,v]=r(!1),k=a(!s),y=a(null),w=t((()=>{const e=y.current;e&&requestAnimationFrame((()=>{e.scrollTo({top:e.scrollHeight})}))}),[]),{ref:z,height:M}=O();return m((()=>{!x&&k.current||(x&&(k.current=!0),w())}),[M,x,k]),j(ee,{bot:o,user:i,logLevel:l,imageResolver:c,children:j(Le,{className:n,children:N(g,{children:[j(_e,{ref:y,children:N(Be,{ref:z,children:[0===f.length&&d,f.map(((e,t)=>j(ve,{actions:p,message:e,updater:t=>{b((r=>{const n=r.findIndex((t=>t.id===e.id));-1!==n&&t(r[n])}))}},t)))]})}),s&&j(qe,{onMessages:b,scrollRef:y,onLoading:v,...s})]})})})}const _e=f.div`
     display: flex;
     flex-direction: column;
     flex: 1;
     overflow-y: auto;
     padding: 0 1rem;
     margin-bottom: .5rem;
-`,_e=f.div`
+`,Be=f.div`
     display: flex;
     flex-direction: column;
     flex: 1;
@@ -578,4 +578,4 @@ import*as e from"react";import{useCallback as r,useState as t,useImperativeHandl
     display: flex;
     flex-direction: column;
     height: 100%;
-`;export{Fe as MessageBox,D as pickQuestions,P as useChat};
+`;export{W as Markdown,Te as MessageBox,A as pickQuestions,I as useChat};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topthink/chat",
-    "version": "1.0.24",
+    "version": "1.0.25",
     "scripts": {
         "prebuild": "rimraf es types",
         "build": "rollup -c --environment NODE_ENV:production",
@@ -18,14 +18,20 @@
     "dependencies": {
         "@babel/runtime": "^7.11.2",
         "@topthink/components": "^1.0.91",
+        "@types/mdast": "^4.0.4",
         "katex": "^0.16.9",
+        "mdast-util-from-markdown": "^2.0.1",
+        "micromark-util-character": "^2.1.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
         "react-markdown": "^8.0.7",
         "react-textarea-autosize": "^8.5.3",
         "rehype-highlight": "^6.0.0",
-        "rehype-katex": "^6.0.2",
+        "rehype-katex": "^6.0.3",
         "remark-breaks": "^3.0.2",
         "remark-gfm": "^3.0.1",
         "remark-math": "^5.1.1",
+        "unified": "^10.0.0",
         "use-resize-observer": "^9.1.0"
     },
     "peerDependencies": {
@@ -56,5 +62,5 @@
     },
     "author": "yunwuxin <tzzhangyajun@qq.com> (https://github.com/yunwuxin)",
     "license": "MIT",
-    "gitHead": "ef11495637c09f62afcfc4ab2d51ffc5cdd9da94"
+    "gitHead": "4c1d12f85f3287b2393d7a6f0ada99b9e739d7aa"
 }

package/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './types';
 export { default as useChat } from './hooks/use-chat';
 export { default as MessageBox } from './components/message-box';
+export { default as Markdown } from './components/markdown';
 export { default as pickQuestions } from './utils/pick-questions';

package/types/utils/remark-cite.d.ts

@@ -0,0 +1,38 @@
+import { Plugin } from 'unified';
+import { Root } from 'mdast';
+import { Options as FromMarkdownOptions } from 'mdast-util-from-markdown';
+declare module 'micromark-util-types' {
+    interface TokenTypeMap {
+        cite: 'cite';
+        citeMarker: 'citeMarker';
+        citeData: 'citeData';
+    }
+}
+declare module 'unified' {
+    interface Data {
+        micromarkExtensions: NonNullable<FromMarkdownOptions['extensions']>;
+        fromMarkdownExtensions: NonNullable<FromMarkdownOptions['mdastExtensions']>;
+        [key: string]: unknown;
+    }
+    interface FrozenProcessor {
+        data(): Data;
+        data<K extends keyof Data>(key: K): Data[K];
+    }
+}
+declare module 'mdast' {
+    interface Cite extends Node {
+        type: 'cite';
+        data: {
+            hName: 'cite';
+            hChildren: [{
+                type: 'text';
+                value: string;
+            }];
+        };
+    }
+    interface RootContentMap {
+        cite: Cite;
+    }
+}
+declare const remarkCite: Plugin<void[], Root, Root>;
+export default remarkCite;