@topthink/chat 1.0.37 → 1.0.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/index.js +89 -57
- package/package.json +3 -3
- package/types/components/markdown.d.ts +2 -2
- package/types/components/message-box/index.d.ts +7 -4
- package/types/components/message-box/input-box.d.ts +3 -3
- package/types/components/message-box/message-item.d.ts +3 -1
- package/types/hooks/use-chat.d.ts +7 -2
- package/types/types.d.ts +20 -8
package/es/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import*as e from"react";import{useCallback as
|
|
1
|
+
import*as e from"react";import{useCallback as r,useEffect as t,useState as n,useRef as o,useImperativeHandle as i,memo as a,useMemo as s,createContext as l,useContext as c,Fragment as d,forwardRef as m}from"react";import{useImmer as h,request as u,isRequestError as p,Lightbox as g,styled as f,Clipboard as b,css as v,formatSize as x,Tooltip as y,useAsync as k,isImageUrl as w,Form as j,Toast as N}from"@topthink/components";import{jsx as q,jsxs as z,Fragment as $}from"react/jsx-runtime";import M from"react-markdown";import"katex/dist/katex.min.css";import C from"remark-math";import E from"remark-breaks";import F from"remark-gfm";import S from"rehype-katex";import D from"rehype-highlight";import{codes as R,types as T}from"micromark-util-symbol";import{markdownLineEnding as _}from"micromark-util-character";import A from"lodash/isEqual";import{Spinner as B,OverlayTrigger as L,Popover as O,CloseButton as P}from"react-bootstrap";import*as I from"path";import U from"path";import H from"react-textarea-autosize";import K from"use-resize-observer";function Q(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 X(e){return e.map((e=>({id:e.id,query:e.query,quote:e.quote||void 0,files:e.files||void 0,variables:e.variables,chunks:e.chunks.map((e=>{let{content:r="",error:t,tools:n=[]}=e;return{content:r,error:t,tools:n}})),annotation:e.annotation,stats:{usage:e.usage,latency:e.latency}})))}function J(e){let{url:a,onboarding:s,suggestion:l,onSuccess:c,ref:d,transformRequest:m,...g}=e;const f=r((e=>{const r=[];if(s&&!1!==s.enable){const e=Q(s.questions||[]);r.push({chunks:[{content:[s.prologue,...e.map((e=>`[${e}](#!question)`))].join("\n"),tools:[]}],loading:s.loading})}return e?r.concat(X(e.messages||[])):r}),[s]),[b,v]=h((()=>f(g.conversation)));t((()=>{v(f(g.conversation))}),[s]);const[x,y]=n([]),[k,w]=n(!1),j=o(g.conversation?.id),N=o(null),q=r((async()=>{N.current=new AbortController;try{let e={method:"post",url:`${a}/suggestion`,data:{conversation:j.current},signal:N.current.signal};m&&(e=m("suggestion",e));const r=await u(e);y(r)}catch{}finally{N.current=null}}),[m,a]),z=r((async function(e){if("string"==typeof e){for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];e={query:e,...t}}const{query:o,files:i=[],variables:s={},quote:d}=e;if(o||i.length>0){N.current&&N.current.abort(),w(!0),y([]),v((e=>{e.push({query:o,quote:d,files:i,variables:s,chunks:[],loading:!0})}));try{let e={method:"post",url:a,data:{query:o,quote:d,files:i,variables:s,conversation:j.current},onMessage:e=>{if(e.data)if("[DONE]"!=e.data)try{const r=JSON.parse(e.data);r.conversation?j.current=r.conversation:v((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 n=r.chunks.tools.index;"response"in r.chunks.tools?(t.chunks[e].tools[n].response=r.chunks.tools.response,t.chunks[e].tools[n].error=r.chunks.tools.error,t.chunks[e].tools[n].content=r.chunks.tools.content):t.chunks[e].tools[n]={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 v((e=>{e[e.length-1].loading=!1}))}};m&&(e=m("chat",e)),await u(e),l?.enable&&q()}catch(e){let r="未知错误";p(e)&&(r=401==e.response?.status?"未授权或授权已过期,请刷新页面后重试":"string"==typeof e.errors?e.errors:Object.values(e.errors).join("\n")),v((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}))}w(!1),c?.()}}),[m,a]),$=r((e=>{k||(j.current=e?.id,v(f(e)),y([]))}),[k,f]);return i(d,(()=>({reset:$,send:z}))),{messages:b,suggestions:x,loading:k,send:z,reset:$}}const W=function(e,r,t){function n(r){return r!==R.leftSquareBracket?(e.exit("citeMarker"),e.enter("citeData"),e.enter(T.chunkString,{contentType:"string"}),o(r)):(e.consume(r),n)}function o(n){return n===R.rightSquareBracket?(e.exit(T.chunkString),e.exit("citeData"),e.enter("citeMarker"),function(n){if(n!==R.rightSquareBracket)return t(n);return e.consume(n),e.exit("citeMarker"),e.exit("cite"),r(n)}(n)):_(n)||n===R.eof||n>57||n<48?t(n):(e.consume(n),o)}return function(r){return r!==R.leftSquareBracket?t(r):(e.enter("cite"),e.enter("citeMarker"),n(r))}},Y=function(){const e=this.data();e.micromarkExtensions.push({text:{[R.leftSquareBracket]:{tokenize:W}}}),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}}})},G=g.Image,V={pre:e=>{let{children:r}=e;const t=o(null);return z(ne,{ref:t,children:[q(te,{tooltip:!1,content:()=>{const e=t.current?.getElementsByTagName("code");return e?.[0]?.innerText||""}}),r]})},a:e=>{let{node:r,href:t,...n}=e;const o=t?.startsWith("http")?"_blank":"_self";return q("a",{...n,href:t,target:o})},img:e=>{let{node:r,...t}=e;return q(G,{...t})}},Z=[[C,{singleDollarTextMath:!1}],F,E],ee=[S,[D,{detect:!1,ignoreMissing:!0}]],re=a((e=>{let{content:r,components:t,cite:n}=e;r=r.replace(/\\\(\s(.+?)\s\\\)/g,"$$$$ $1 $$$$");const o=s((()=>{const e={...V,...t};return n&&(e.cite=n),e}),[t,n]),i=s((()=>n?[...Z,Y]:Z),[n]);return q(oe,{remarkPlugins:i,rehypePlugins:ee,components:o,children:r})}),A),te=f(b)`
|
|
2
2
|
position: absolute;
|
|
3
3
|
right: 10px;
|
|
4
4
|
top: 1em;
|
|
@@ -18,17 +18,17 @@ import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImp
|
|
|
18
18
|
&:hover {
|
|
19
19
|
opacity: 1;
|
|
20
20
|
}
|
|
21
|
-
`,
|
|
21
|
+
`,ne=f.pre`
|
|
22
22
|
position: relative;
|
|
23
23
|
|
|
24
24
|
&:hover {
|
|
25
|
-
${
|
|
25
|
+
${te} {
|
|
26
26
|
pointer-events: all;
|
|
27
27
|
transform: translateX(0px);
|
|
28
28
|
opacity: 0.5;
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
-
`,
|
|
31
|
+
`,oe=f(M)`
|
|
32
32
|
-ms-text-size-adjust: 100%;
|
|
33
33
|
-webkit-text-size-adjust: 100%;
|
|
34
34
|
line-height: 1.8;
|
|
@@ -52,7 +52,7 @@ import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImp
|
|
|
52
52
|
padding: 0;
|
|
53
53
|
|
|
54
54
|
&:first-child {
|
|
55
|
-
margin-
|
|
55
|
+
margin-top: 0 !important;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
&:last-child {
|
|
@@ -298,7 +298,7 @@ import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImp
|
|
|
298
298
|
.hljs-strong {
|
|
299
299
|
font-weight: 700;
|
|
300
300
|
}
|
|
301
|
-
`,
|
|
301
|
+
`,ie=l(null);function ae(){const e=c(ie);if(!e)throw new Error("useContext must be used within a Provider");return e}function se(e){let{children:r,...t}=e;return q(ie.Provider,{value:t,children:r})}const le=g.Image;function ce(e){let{src:r,...t}=e;const{imageResolver:n}=ae();return n&&r&&(r=n(r)),q(de,{children:q(le,{src:r,...t})})}const de=f.div`
|
|
302
302
|
margin-bottom: .5rem;
|
|
303
303
|
margin-top: .5rem;
|
|
304
304
|
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 t,useState as r,useRef as n,useImp
|
|
|
323
323
|
max-height: 100%;
|
|
324
324
|
max-width: 100%;
|
|
325
325
|
}
|
|
326
|
-
`;function
|
|
326
|
+
`;function me(e){let{tool:r}=e;const[t,o]=n(!1),{logLevel:i="none"}=ae();let a=null;r.content&&("string"==typeof r.content?a=q(re,{content:r.content}):"image"===r.content.type&&(a=q(ce,{src:r.content.image})));const s="response"in r;return z(d,{children:["stats"==i&&q("div",{className:"mb-2",children:z("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?q("i",{className:"bi bi-x-circle-fill text-danger"}):q("i",{className:"bi bi-check-circle-fill text-success"}):q(B,{animation:"border",variant:"primary",size:"sm"}),q("span",{className:"text-muted",children:s?"已使用":"正在使用"}),q("span",{children:r.title})]})}),"all"==i&&q("div",{className:"mb-2",children:z("div",t&&s?{className:"shadow-sm rounded bg-white fs-7",children:[z("div",{onClick:()=>o(!1),role:"button",className:"d-flex align-items-center p-1 px-2 gap-2",children:[r.error?q("i",{className:"bi bi-x-circle-fill text-danger"}):q("i",{className:"bi bi-check-circle-fill text-success"}),q("span",{className:"text-muted",children:"已使用"}),q("span",{children:r.title}),q("i",{className:"bi bi-caret-up-fill text-muted"})]}),z("div",{className:"border-top p-2 d-flex flex-column gap-2",children:[z("div",{className:"border rounded bg-light",children:[q("div",{className:"d-flex align-items-center p-1 px-2 fs-7 gap-2",children:q("span",{className:"text-muted",children:"参数"})}),q("div",{className:"border-top p-2 overflow-hidden",children:r.arguments})]}),z("div",{className:"border rounded bg-light",children:[q("div",{className:"d-flex align-items-center p-1 px-2 fs-7 gap-2",children:q("span",{className:"text-muted",children:"响应"})}),q(he,{className:"border-top p-2 overflow-hidden",children:r.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?r.error?q("i",{className:"bi bi-x-circle-fill text-danger"}):q("i",{className:"bi bi-check-circle-fill text-success"}):q(B,{animation:"border",variant:"primary",size:"sm"}),q("span",{className:"text-muted",children:s?"已使用":"正在使用"}),q("span",{children:r.title}),s&&q("i",{className:"bi bi-caret-down-fill text-muted"})]})}),a]})}const he=f.div`
|
|
327
327
|
white-space: pre-wrap;
|
|
328
|
-
`;var
|
|
328
|
+
`;var ue,pe,ge;function fe(){return fe=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},fe.apply(this,arguments)}const be=r=>e.createElement("svg",fe({xmlns:"http://www.w3.org/2000/svg",width:20,height:10,fill:"#fff",viewBox:"0 0 120 30"},r),ue||(ue=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"}))),pe||(pe=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"}))),ge||(ge=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 ve=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?q("img",{width:30,height:30,src:t}):null};function xe(e){let{className:r,name:t,size:n,loading:o,error:i,onRemove:a}=e;const s=U.extname(t).substring(1),l=z(je,{className:r,$error:!!i,children:[z(we,{children:[q(ve,{ext:s}),o&&q(B,{variant:"primary"})]}),z(ke,{children:[q("h4",{children:t}),q("p",{children:x(n,1)})]}),a&&q(ye,{onClick:e=>{e.preventDefault(),a()},children:q("i",{className:"bi bi-trash3"})})]});return i?q(y,{placement:"top",tooltip:i,children:l}):l}const ye=f.div`
|
|
329
329
|
width: 1.75rem;
|
|
330
330
|
height: 1.75rem;
|
|
331
331
|
align-items: center;
|
|
@@ -340,7 +340,7 @@ import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImp
|
|
|
340
340
|
color: var(--bs-danger);
|
|
341
341
|
background-color: var(--bs-danger-bg-subtle);
|
|
342
342
|
}
|
|
343
|
-
`,
|
|
343
|
+
`,ke=f.div`
|
|
344
344
|
flex: 1;
|
|
345
345
|
overflow: hidden;
|
|
346
346
|
|
|
@@ -361,7 +361,7 @@ import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImp
|
|
|
361
361
|
line-height: 20px;
|
|
362
362
|
margin-bottom: 0;
|
|
363
363
|
}
|
|
364
|
-
`,
|
|
364
|
+
`,we=f.div`
|
|
365
365
|
position: relative;
|
|
366
366
|
width: 3rem;
|
|
367
367
|
height: 3rem;
|
|
@@ -375,7 +375,7 @@ import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImp
|
|
|
375
375
|
position: absolute;
|
|
376
376
|
}
|
|
377
377
|
|
|
378
|
-
`,
|
|
378
|
+
`,je=f.div`
|
|
379
379
|
display: flex;
|
|
380
380
|
gap: .5rem;
|
|
381
381
|
padding: .5rem;
|
|
@@ -391,7 +391,7 @@ import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImp
|
|
|
391
391
|
${e=>e.$error&&v`
|
|
392
392
|
border-color: var(--bs-danger) !important;
|
|
393
393
|
`}
|
|
394
|
-
`;var
|
|
394
|
+
`;var Ne=m((function(e,r){let{children:t,tooltip:n,onClick:o,...i}=e;const a=q(qe,{ref:r,onClick:o,...i,children:t});return n?q(y,{tooltip:n,placement:"top",children:a}):a}));const qe=f.div`
|
|
395
395
|
align-items: center;
|
|
396
396
|
justify-content: center;
|
|
397
397
|
border-radius: .375rem;
|
|
@@ -415,12 +415,34 @@ import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImp
|
|
|
415
415
|
background-color: var(--bs-gray-200);
|
|
416
416
|
}
|
|
417
417
|
}
|
|
418
|
-
`,
|
|
418
|
+
`,ze=a((e=>{let{message:r,actions:t,updater:n,cite:i}=e;const{query:a,quote:l,files:c=[],chunks:m,annotation:h}=r,{user:u,bot:p,logLevel:g="none"}=ae(),f=s((()=>m?m.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),"")}),""):""),[m]),v=o(null);return z($,{children:[(a||c.length>0)&&z(Ae,{$reverse:!0,children:[u&&q(Re,{children:q("img",{src:u.avatar})}),q(Te,{}),z(_e,{ref:v,children:[a&&q(re,{content:a}),l&&q(L,{trigger:"click",container:v,rootClose:!0,placement:"bottom",overlay:q($e,{body:!0,children:l}),children:q(Ce,{children:q(Me,{children:l})})}),c.length>0&&c.map(((e,r)=>{let{name:t,size:n,path:o}=e;return w(o)?q(ce,{src:`/uploads/${o}`},r):q(Fe,{children:q(xe,{name:t,size:n})},r)}))]})]}),m&&z(Ae,{children:[q(Re,{children:q("img",{src:p.avatar})}),q(Te,{}),z(_e,{children:[(a||c.length>0)&&z(Se,{children:[q(b,{placement:"top",content:f,as:Ne,tooltip:!0}),t?.({Component:Ne,message:r,content:f,setMessage:n})]}),q(De,{children:["stats","all"].includes(g)&&r.stats&&z($,{children:[z("span",{children:["耗时 ",r.stats.latency/1e3," 秒"]}),z("span",{children:["花费 Token ",r.stats.usage]})]})}),q(Ee,{$deleted:!!h,children:m.length>0&&m.map(((e,r)=>z(d,{children:[e.content&&q(re,{cite:i,content:e.content}),e.tools.map(((e,r)=>q(me,{tool:e},r))),e.error&&q(re,{content:`[${e.error}]`})]},r)))}),h&&z("div",{children:[z("div",{className:"d-flex align-items-center",children:[q("span",{className:"fs-7 text-secondary me-2",children:"标注的答案"}),q("hr",{className:"flex-fill"})]}),q(re,{content:h.answer})]}),r.loading&&q(be,{})]})]})]})})),$e=f(O)`
|
|
419
|
+
max-width: calc(100% - .875rem * 2);
|
|
420
|
+
width: calc(100% - .875rem * 2);
|
|
421
|
+
font-size: 1rem;
|
|
422
|
+
white-space: pre-wrap;
|
|
423
|
+
|
|
424
|
+
.popover-body {
|
|
425
|
+
padding: .5rem .75rem;
|
|
426
|
+
}
|
|
427
|
+
`,Me=f.div`
|
|
428
|
+
overflow: hidden;
|
|
429
|
+
text-overflow: ellipsis;
|
|
430
|
+
word-break: break-all;
|
|
431
|
+
-webkit-line-clamp: 2;
|
|
432
|
+
-webkit-box-orient: vertical;
|
|
433
|
+
display: -webkit-box;
|
|
434
|
+
`,Ce=f.div`
|
|
435
|
+
padding: .5rem .75rem;
|
|
436
|
+
color: var(--bs-secondary);
|
|
437
|
+
border-radius: var(--bs-border-radius-lg);
|
|
438
|
+
background: #FFFFFF;
|
|
439
|
+
cursor: pointer;
|
|
440
|
+
`,Ee=f.div`
|
|
419
441
|
${e=>e.$deleted&&v`
|
|
420
442
|
text-decoration-line: line-through;
|
|
421
443
|
color: var(--bs-secondary);
|
|
422
444
|
`}
|
|
423
|
-
`,
|
|
445
|
+
`,Fe=f.div`
|
|
424
446
|
width: 100%;
|
|
425
447
|
margin-bottom: .5rem;
|
|
426
448
|
margin-top: .5rem;
|
|
@@ -432,7 +454,7 @@ import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImp
|
|
|
432
454
|
&:last-child {
|
|
433
455
|
margin-bottom: 0;
|
|
434
456
|
}
|
|
435
|
-
`,
|
|
457
|
+
`,Se=f.div`
|
|
436
458
|
position: absolute;
|
|
437
459
|
top: -1.1rem;
|
|
438
460
|
right: 0;
|
|
@@ -440,7 +462,7 @@ import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImp
|
|
|
440
462
|
gap: .5rem;
|
|
441
463
|
opacity: 0;
|
|
442
464
|
z-index: 1;
|
|
443
|
-
`,
|
|
465
|
+
`,De=f.div`
|
|
444
466
|
position: absolute;
|
|
445
467
|
bottom: -1.4rem;
|
|
446
468
|
left: 0;
|
|
@@ -453,7 +475,7 @@ import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImp
|
|
|
453
475
|
display: flex;
|
|
454
476
|
opacity: 0;
|
|
455
477
|
z-index: 1;
|
|
456
|
-
|
|
478
|
+
`,Re=f.div`
|
|
457
479
|
width: 35px;
|
|
458
480
|
height: 35px;
|
|
459
481
|
border-radius: 50%;
|
|
@@ -463,60 +485,49 @@ import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImp
|
|
|
463
485
|
width: 100%;
|
|
464
486
|
height: 100%;
|
|
465
487
|
}
|
|
466
|
-
`,
|
|
488
|
+
`,Te=f.div`
|
|
489
|
+
width: 0;
|
|
490
|
+
height: 0;
|
|
491
|
+
content: "";
|
|
492
|
+
border: 5px solid transparent;
|
|
493
|
+
border-right-color: #f3f3f3;
|
|
494
|
+
transform: translateY(10px);
|
|
495
|
+
`,_e=f.div`
|
|
467
496
|
padding: .875rem;
|
|
468
497
|
background-color: rgb(243, 243, 243);
|
|
469
498
|
border-radius: var(--bs-border-radius-lg);
|
|
470
499
|
max-width: 80%;
|
|
471
|
-
margin-left: 10px;
|
|
472
500
|
position: relative;
|
|
473
501
|
|
|
474
|
-
&:before {
|
|
475
|
-
position: absolute;
|
|
476
|
-
top: 10px;
|
|
477
|
-
left: -10px;
|
|
478
|
-
width: 0;
|
|
479
|
-
height: 0;
|
|
480
|
-
content: "";
|
|
481
|
-
border: 5px solid transparent;
|
|
482
|
-
border-right-color: #f3f3f3;
|
|
483
|
-
}
|
|
484
|
-
|
|
485
502
|
&:hover {
|
|
486
|
-
${
|
|
503
|
+
${De}, ${Se} {
|
|
487
504
|
opacity: 1;
|
|
488
505
|
}
|
|
489
506
|
}
|
|
490
|
-
`,
|
|
507
|
+
`,Ae=f.div`
|
|
491
508
|
display: flex;
|
|
492
509
|
justify-content: flex-start;
|
|
493
510
|
padding: 1rem 0 1rem 0;
|
|
494
511
|
${e=>e.$reverse&&v`
|
|
495
512
|
flex-direction: row-reverse;
|
|
496
513
|
|
|
497
|
-
${
|
|
514
|
+
${Te} {
|
|
515
|
+
border-left-color: rgba(var(--bs-primary-rgb), 0.1);
|
|
516
|
+
border-right-color: transparent;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
${_e} {
|
|
498
520
|
background: rgba(var(--bs-primary-rgb), 0.1);
|
|
499
|
-
margin-right: 10px;
|
|
500
|
-
margin-left: 0;
|
|
501
|
-
|
|
502
|
-
&:before {
|
|
503
|
-
position: absolute;
|
|
504
|
-
top: 10px;
|
|
505
|
-
right: -10px;
|
|
506
|
-
left: auto;
|
|
507
|
-
border-left-color: rgba(var(--bs-primary-rgb), 0.1);
|
|
508
|
-
border-right-color: transparent;
|
|
509
|
-
}
|
|
510
521
|
}
|
|
511
522
|
`};
|
|
512
|
-
`,
|
|
523
|
+
`,Be=[".txt",".md",".pdf",".docx",".xlsx",".pptx",".png",".jpg"];function Le(e){let{variables:r,values:t,onSubmit:n,onChange:o,children:i}=e;const a={},s=[],l={};return r.forEach((e=>{a[e.key]={type:"string",title:e.label},"textarea"===e.type?l[e.key]={"ui:widget":"textarea"}:"select"===e.type&&e.options&&(a[e.key].enum=e.options,a[e.key].enumNames=e.options,e.options.length>0&&(a[e.key].default=e.options[0])),e.required&&s.push(e.key)})),q(j,{schema:{type:"object",properties:a,required:s},formData:t,omitExtraData:!0,uiSchema:l,submitText:"开始对话",onSubmit:n,onChange:o,children:i})}var Oe=m((function(e,a){let{chat:s,fileTypes:l,scrollRef:c,onMessages:d,onSuggestions:m,variables:g,minRows:f,toolbar:b,disabled:v,onLoading:x,autoFocus:k}=e;const w=o(null),j=o(null),[$,M]=n(""),[C,E]=n(""),[F,S]=h([]),[D,R]=n(!1),T=l&&l.length>0?l:Be,{loading:_,messages:A,suggestions:B,send:L,reset:O}=J({...s,onSuccess(){requestAnimationFrame((()=>{w.current?.focus()})),s.onSuccess?.()}}),[U,K]=n((()=>{const e=A.filter((e=>!!e.query));if(e.length>0){return e[e.length-1].variables}}));t((()=>{d(A)}),[A]),t((()=>{m(B)}),[B]),t((()=>{x?.(_)}),[_]),t((()=>{!l&&F.length>0&&S([])}),[l]),t((()=>{const e=c.current;if(e&&L){const r=e=>{e.target instanceof HTMLAnchorElement&&"#!question"===e.target.hash&&(e.preventDefault(),L(e.target.text))};return e.addEventListener("click",r),()=>{e.removeEventListener("click",r)}}}),[c,L]);const Q=r((e=>{let{target:r}=e;if(r.files){const e=Array.from(r.files).filter((e=>!!T.includes(I.extname(e.name))&&(!(e.size>20971520)&&e))).slice(0,6-F.length);S((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:`${s.url}/upload`,data:r};s.transformRequest&&(t=s.transformRequest("upload",t));const n=await u(t);S((r=>{const t=r.find((r=>r.file===e));t&&(t.path=n.path)}))}catch(r){const t=p(r)?r.message:"unknown error";S((r=>{const n=r.find((r=>r.file===e));n&&(n.error=t)}))}}))}r.value=""}),[F,T]),X=F.flatMap((e=>{let{file:r,path:t}=e;return t?[{name:r.name,size:r.size,path:t}]:[]})),W=r((()=>{if($||X.length>0){const e={query:$,files:X};g&&(e.variables={...U,...g.values}),C&&(e.quote=C),L(e),M(""),E(""),S([])}}),[$,X,g,C]);if(i(a,(()=>({setQuery:M,setQuote:E,reset:O,send:L,focus(){w.current?.focus()}}))),g){const e=g.config.filter((e=>!(e.key in(g.values||{})))),r=function(r){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return!!r&&e.every((e=>{const n=!e.required||r?.[e.key];return!n&&t&&N.error("请完善必填信息"),n}))};if(e.length>0&&!r(U))return q(Ie,{children:q(Pe,{children:q(Le,{values:U,variables:e,onSubmit:e=>{let{formData:t}=e;if(r(t,!0))return K(t),!0}})})})}return z(We,{children:[b,z(Je,{$focused:D&&!_,children:[F.length>0&&q(He,{children:F.map(((e,r)=>{let{file:t,error:n,path:o}=e;const i=void 0===n&&void 0===o;return q(Ue,{name:t.name,size:t.size,error:n,loading:i,onRemove:()=>{S((e=>{const r=e.findIndex((e=>e.file===t));-1!==r&&e.splice(r,1)}))}},r)}))}),!!C&&z(Xe,{children:[q("i",{className:"bi bi-quote"}),q("p",{children:C}),q(P,{onClick:()=>E("")})]}),z(Qe,{children:[q(H,{disabled:_||v,ref:w,placeholder:"请输入你的问题, Enter+Shift换行, Enter发送",minRows:f,maxRows:5,value:$,onChange:e=>M(e.target.value),onKeyDown:e=>{"Enter"!==e.key||e.shiftKey||(e.preventDefault(),W())},autoFocus:k,onFocus:()=>R(!0),onBlur:()=>R(!1)}),l&&q(y,{tooltip:"可上传不超过6个小于20MB的文件",placement:"top",children:z(Ke,{disabled:F.length>=6,onClick:()=>j.current?.click(),children:[q("input",{onChange:Q,multiple:!0,accept:T.join(","),ref:j,type:"file",hidden:!0}),q("i",{className:"bi bi-file-earmark-arrow-up"})]})}),q(Ke,{className:"text-primary",disabled:!$&&0===X.length,onClick:e=>{e.preventDefault(),W()},children:q("i",{className:"bi bi-send-fill"})})]})]})]})}));const Pe=f.div`
|
|
513
524
|
border-radius: var(--bs-border-radius-lg);
|
|
514
525
|
box-shadow: var(--bs-box-shadow-sm);
|
|
515
526
|
margin: 1rem;
|
|
516
527
|
padding: 1rem;
|
|
517
528
|
width: 100%;
|
|
518
529
|
max-width: 500px;
|
|
519
|
-
`,
|
|
530
|
+
`,Ie=f.div`
|
|
520
531
|
position: absolute;
|
|
521
532
|
left: 0;
|
|
522
533
|
right: 0;
|
|
@@ -526,15 +537,15 @@ import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImp
|
|
|
526
537
|
display: flex;
|
|
527
538
|
justify-content: center;
|
|
528
539
|
align-items: center;
|
|
529
|
-
`,
|
|
540
|
+
`,Ue=f(xe)`
|
|
530
541
|
width: calc((100% - .75rem) / 2);
|
|
531
|
-
`,
|
|
542
|
+
`,He=f.div`
|
|
532
543
|
display: flex;
|
|
533
544
|
flex-wrap: wrap;
|
|
534
545
|
padding: .75rem;
|
|
535
546
|
gap: .75rem;
|
|
536
547
|
border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
|
|
537
|
-
`,
|
|
548
|
+
`,Ke=f.button`
|
|
538
549
|
color: var(--bs-secondary);
|
|
539
550
|
cursor: pointer;
|
|
540
551
|
display: flex;
|
|
@@ -556,7 +567,7 @@ import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImp
|
|
|
556
567
|
background-color: var(--bs-gray-200);
|
|
557
568
|
}
|
|
558
569
|
|
|
559
|
-
`,
|
|
570
|
+
`,Qe=f.div`
|
|
560
571
|
display: flex;
|
|
561
572
|
padding: .5rem .5rem .5rem 1rem;
|
|
562
573
|
gap: .25rem;
|
|
@@ -573,14 +584,35 @@ import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImp
|
|
|
573
584
|
color: rgba(54, 54, 54, .3);
|
|
574
585
|
}
|
|
575
586
|
}
|
|
576
|
-
`,
|
|
587
|
+
`,Xe=f.div`
|
|
588
|
+
margin: .75rem .75rem 0 .75rem;
|
|
589
|
+
padding: 4px 8px;
|
|
590
|
+
display: flex;
|
|
591
|
+
align-items: center;
|
|
592
|
+
gap: 6px;
|
|
593
|
+
color: var(--bs-secondary);
|
|
594
|
+
border-radius: 4px;
|
|
595
|
+
background: rgb(243, 243, 243);
|
|
596
|
+
|
|
597
|
+
p {
|
|
598
|
+
margin-bottom: 0;
|
|
599
|
+
min-width: 0;
|
|
600
|
+
flex: 1;
|
|
601
|
+
overflow: hidden;
|
|
602
|
+
text-overflow: ellipsis;
|
|
603
|
+
word-break: break-all;
|
|
604
|
+
-webkit-line-clamp: 1;
|
|
605
|
+
-webkit-box-orient: vertical;
|
|
606
|
+
display: -webkit-box;
|
|
607
|
+
}
|
|
608
|
+
`,Je=f.div`
|
|
577
609
|
background: #FFF;
|
|
578
610
|
border: var(--bs-border-width) var(--bs-border-style) ${e=>e.$focused?"var(--bs-primary)":"var(--bs-border-color)"};
|
|
579
611
|
border-radius: var(--bs-border-radius-lg);
|
|
580
612
|
box-shadow: 0.125rem 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
|
|
581
|
-
`,
|
|
613
|
+
`,We=f.div`
|
|
582
614
|
margin: 0 1rem 1rem;
|
|
583
|
-
|
|
615
|
+
`,Ye=a((e=>{let{className:i,bot:a,user:s,input:l,logLevel:c,imageResolver:d,placeholder:m,actions:u,messages:p=[],cite:f}=e;const[b,v]=h((()=>X(p))),[x,y]=n(!1),k=o(!l),w=o(null),j=r((()=>{const e=w.current;e&&requestAnimationFrame((()=>{e.scrollTo({top:e.scrollHeight})}))}),[]),{ref:N,height:$}=K(),[M,C]=n([]);return t((()=>{(x||!k.current)&&b.length>0&&(x&&(k.current=!0),j())}),[$,x,k,b]),t((()=>{M.length>0&&j()}),[M]),q(se,{bot:a,user:s,logLevel:c,imageResolver:d,children:q(er,{className:i,children:z(g,{children:[q(Ve,{ref:w,children:z(Ze,{ref:N,children:[0===b.length&&m,b.slice(-30).map(((e,r)=>q(ze,{actions:u,cite:f,message:e,updater:r=>{v((t=>{const n=t.findIndex((r=>r.id===e.id));-1!==n&&r(t[n])}))}},r))),M.length>0&&q(Ge,{children:M.map(((e,r)=>q("a",{href:"#!question",children:e},r)))})]})}),l&&q(Oe,{...l,onMessages:v,onSuggestions:C,scrollRef:w,onLoading:y})]})})})}),A),Ge=f.div`
|
|
584
616
|
display: flex;
|
|
585
617
|
flex-direction: column;
|
|
586
618
|
align-items: flex-start;
|
|
@@ -597,20 +629,20 @@ import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImp
|
|
|
597
629
|
background: var(--bs-secondary-bg-subtle);
|
|
598
630
|
}
|
|
599
631
|
}
|
|
600
|
-
`,
|
|
632
|
+
`,Ve=f.div`
|
|
601
633
|
display: flex;
|
|
602
634
|
flex-direction: column;
|
|
603
635
|
flex: 1;
|
|
604
636
|
overflow-y: auto;
|
|
605
637
|
padding: 0 1rem;
|
|
606
638
|
margin-bottom: .5rem;
|
|
607
|
-
`,
|
|
639
|
+
`,Ze=f.div`
|
|
608
640
|
display: flex;
|
|
609
641
|
flex-direction: column;
|
|
610
642
|
flex: 1;
|
|
611
|
-
`,
|
|
643
|
+
`,er=f.div`
|
|
612
644
|
display: flex;
|
|
613
645
|
flex-direction: column;
|
|
614
646
|
height: 100%;
|
|
615
647
|
position: relative;
|
|
616
|
-
`;export{
|
|
648
|
+
`;export{re as Markdown,Ye as MessageBox,Le as VariableForm,Q as pickQuestions,J as useChat};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@topthink/chat",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.39",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"prebuild": "rimraf es types",
|
|
6
6
|
"build": "rollup -c --environment NODE_ENV:production",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
],
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@babel/runtime": "^7.11.2",
|
|
20
|
-
"@topthink/components": "^1.0.
|
|
20
|
+
"@topthink/components": "^1.0.97",
|
|
21
21
|
"@types/mdast": "^4.0.4",
|
|
22
22
|
"katex": "^0.16.9",
|
|
23
23
|
"mdast-util-from-markdown": "^2.0.1",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
},
|
|
66
66
|
"author": "yunwuxin <tzzhangyajun@qq.com> (https://github.com/yunwuxin)",
|
|
67
67
|
"license": "MIT",
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "52bf9a2028418a96f5f855e8d53699c338dede16"
|
|
69
69
|
}
|
|
@@ -4,7 +4,7 @@ import 'katex/dist/katex.min.css';
|
|
|
4
4
|
interface Props {
|
|
5
5
|
content: string;
|
|
6
6
|
components?: Components;
|
|
7
|
-
cite?:
|
|
7
|
+
cite?: Components['cite'];
|
|
8
8
|
}
|
|
9
|
-
export declare const Markdown: import("react").MemoExoticComponent<({ content, components, cite }: Props) => JSX.Element>;
|
|
9
|
+
export declare const Markdown: import("react").MemoExoticComponent<({ content, components: userComponents, cite }: Props) => JSX.Element>;
|
|
10
10
|
export default Markdown;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { ConversationMessage, LogLevel, Variable } from '../../types';
|
|
1
|
+
import { MutableRefObject, ReactNode } from 'react';
|
|
2
|
+
import { ConversationMessage, Input, LogLevel, Variable } from '../../types';
|
|
3
3
|
import { ChatOptions } from '../../hooks/use-chat';
|
|
4
4
|
import { MessageActions } from './message-item';
|
|
5
|
+
import { Components } from 'react-markdown';
|
|
5
6
|
interface Props {
|
|
6
7
|
className?: string;
|
|
7
8
|
bot: {
|
|
@@ -27,8 +28,10 @@ interface Props {
|
|
|
27
28
|
config: Variable[];
|
|
28
29
|
values?: Record<string, string>;
|
|
29
30
|
};
|
|
31
|
+
ref?: MutableRefObject<Input | null>;
|
|
30
32
|
};
|
|
31
33
|
actions?: MessageActions;
|
|
34
|
+
cite?: Components['cite'];
|
|
32
35
|
}
|
|
33
|
-
|
|
34
|
-
export
|
|
36
|
+
declare const MessageBox: import("react").MemoExoticComponent<({ className, bot, user, input, logLevel, imageResolver, placeholder, actions, messages: initMessages, cite, }: Props) => JSX.Element>;
|
|
37
|
+
export default MessageBox;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { MutableRefObject, ReactNode } from 'react';
|
|
2
|
-
import { Message, Variable } from '../../types';
|
|
2
|
+
import { Input, Message, Variable } from '../../types';
|
|
3
3
|
import { ChatOptions } from '../../hooks/use-chat';
|
|
4
4
|
interface Props {
|
|
5
5
|
chat: ChatOptions;
|
|
@@ -17,5 +17,5 @@ interface Props {
|
|
|
17
17
|
onLoading?: (loading: boolean) => void;
|
|
18
18
|
autoFocus?: boolean;
|
|
19
19
|
}
|
|
20
|
-
|
|
21
|
-
export
|
|
20
|
+
declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<Input>>;
|
|
21
|
+
export default _default;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { Message } from '../../types';
|
|
3
3
|
import Action from './action';
|
|
4
|
+
import { Components } from 'react-markdown';
|
|
4
5
|
export type MessageActions = (props: {
|
|
5
6
|
Component: typeof Action;
|
|
6
7
|
message: Message;
|
|
@@ -11,6 +12,7 @@ interface Props {
|
|
|
11
12
|
message: Message;
|
|
12
13
|
actions?: MessageActions;
|
|
13
14
|
updater: (callback: (message: Message) => void) => void;
|
|
15
|
+
cite?: Components['cite'];
|
|
14
16
|
}
|
|
15
|
-
declare const MessageItem: import("react").MemoExoticComponent<({ message, actions, updater }: Props) => JSX.Element>;
|
|
17
|
+
declare const MessageItem: import("react").MemoExoticComponent<({ message, actions, updater, cite }: Props) => JSX.Element>;
|
|
16
18
|
export default MessageItem;
|
|
@@ -8,7 +8,8 @@ export interface ChatOptions {
|
|
|
8
8
|
onboarding?: {
|
|
9
9
|
enable?: boolean;
|
|
10
10
|
prologue: string;
|
|
11
|
-
questions
|
|
11
|
+
questions?: string[];
|
|
12
|
+
loading?: boolean;
|
|
12
13
|
};
|
|
13
14
|
suggestion?: {
|
|
14
15
|
enable?: boolean;
|
|
@@ -20,6 +21,10 @@ export default function useChat({ url, onboarding, suggestion, onSuccess, ref, t
|
|
|
20
21
|
messages: Message[];
|
|
21
22
|
suggestions: string[];
|
|
22
23
|
loading: boolean;
|
|
23
|
-
send: (
|
|
24
|
+
send: (params: string | import("../types").ChatParams, files?: {
|
|
25
|
+
path: string;
|
|
26
|
+
name: string;
|
|
27
|
+
size: number;
|
|
28
|
+
}[] | undefined, variables?: Record<string, string> | undefined) => void;
|
|
24
29
|
reset: (conversation?: Conversation) => void;
|
|
25
30
|
};
|
package/types/types.d.ts
CHANGED
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
export interface Chat {
|
|
2
|
-
reset(conversation?: Conversation): void;
|
|
3
|
-
send(query: string): void;
|
|
4
|
-
}
|
|
5
1
|
export interface ToolMessage {
|
|
6
2
|
name: string;
|
|
7
3
|
title: string;
|
|
@@ -20,6 +16,7 @@ export type LogLevel = 'stats' | 'all' | 'none';
|
|
|
20
16
|
export interface Message {
|
|
21
17
|
id?: string;
|
|
22
18
|
query?: string;
|
|
19
|
+
quote?: string;
|
|
23
20
|
files?: {
|
|
24
21
|
path: string;
|
|
25
22
|
name: string;
|
|
@@ -50,16 +47,15 @@ export interface Variable {
|
|
|
50
47
|
required?: boolean;
|
|
51
48
|
}
|
|
52
49
|
export interface Conversation {
|
|
53
|
-
id
|
|
54
|
-
title: string;
|
|
50
|
+
id?: string;
|
|
55
51
|
messages?: ConversationMessage[];
|
|
56
|
-
update_time: string;
|
|
57
52
|
[key: string]: any;
|
|
58
53
|
}
|
|
59
54
|
export interface ConversationMessage {
|
|
60
55
|
id: string;
|
|
61
56
|
query: string;
|
|
62
|
-
|
|
57
|
+
quote?: string;
|
|
58
|
+
files?: [];
|
|
63
59
|
variables?: Record<string, string>;
|
|
64
60
|
chunks: {
|
|
65
61
|
content?: '';
|
|
@@ -73,4 +69,20 @@ export interface ConversationMessage {
|
|
|
73
69
|
question: string;
|
|
74
70
|
answer: string;
|
|
75
71
|
};
|
|
72
|
+
[key: string]: any;
|
|
73
|
+
}
|
|
74
|
+
export interface ChatParams {
|
|
75
|
+
query: string;
|
|
76
|
+
quote?: string;
|
|
77
|
+
files?: Message['files'];
|
|
78
|
+
variables?: Record<string, string>;
|
|
79
|
+
}
|
|
80
|
+
export interface Chat {
|
|
81
|
+
reset(conversation?: Conversation): void;
|
|
82
|
+
send(params: string | ChatParams, files?: Message['files'], variables?: Message['variables']): void;
|
|
83
|
+
}
|
|
84
|
+
export interface Input extends Chat {
|
|
85
|
+
setQuery(query: string): void;
|
|
86
|
+
setQuote(quote: string): void;
|
|
87
|
+
focus(): void;
|
|
76
88
|
}
|