@topthink/chat 1.0.31 → 1.0.33
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 +68 -33
- package/package.json +2 -2
- package/types/components/message-box/index.d.ts +5 -1
- package/types/components/message-box/input-box.d.ts +7 -2
- package/types/components/variable-form.d.ts +12 -0
- package/types/hooks/use-chat.d.ts +7 -3
- package/types/index.d.ts +1 -0
- package/types/types.d.ts +9 -0
package/es/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import*as e from"react";import{useCallback as t,useState as r,
|
|
1
|
+
import*as e from"react";import{useCallback as t,useState as r,useRef as n,useImperativeHandle as o,memo as i,useMemo 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 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 $,jsxs as z,Fragment as M}from"react/jsx-runtime";import q 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{Spinner as B}from"react-bootstrap";import*as L from"path";import O from"path";import A from"react-textarea-autosize";import P from"use-resize-observer";function I(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 U(e){return e.map((e=>({id:e.id,query:e.query,files:e.files||void 0,variables:e.variables,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 H(e){let{url:i,onboarding:a,suggestion:s,onSuccess:l,ref:c,transformRequest:d,...m}=e;const g=t((e=>{const t=[];if(a&&!1!==a.enable&&a.prologue){const e=I(a.questions);t.push({chunks:[{content:[a.prologue,...e.map((e=>`[${e}](#!question)`))].join("\n"),tools:[]}]})}return e?t.concat(U(e.messages||[])):t}),[a]),[f,b]=h((()=>g(m.conversation))),[v,x]=r([]),[y,k]=r(!1),w=n(m.conversation?.id),j=n(null),N=t((async()=>{j.current=new AbortController;try{let e={method:"post",url:`${i}/suggestion`,data:{conversation:w.current},signal:j.current.signal};d&&(e=d("suggestion",e));const t=await u(e);x(t)}catch{}finally{j.current=null}}),[d,i]),$=t((async function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=arguments.length>2?arguments[2]:void 0;if(e||t.length>0){j.current&&j.current.abort(),k(!0),x([]),b((n=>{n.push({query:e,files:t,variables:r,chunks:[],loading:!0})}));try{let n={method:"post",url:i,data:{query:e,files:t,variables:r,conversation:w.current},onMessage:e=>{if(e.data)if("[DONE]"!=e.data)try{const t=JSON.parse(e.data);t.conversation?w.current=t.conversation:b((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 b((e=>{e[e.length-1].loading=!1}))}};d&&(n=d("chat",n)),await u(n),s?.enable&&N()}catch(e){let t="未知错误";p(e)&&(t=401==e.response?.status?"未授权或授权已过期,请刷新页面后重试":"string"==typeof e.errors?e.errors:Object.values(e.errors).join("\n")),b((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}))}k(!1),l?.()}}),[d,i]),z=t((e=>{y||(w.current=e?.id,b(g(e)),x([]))}),[y,g]);return o(c,(()=>({reset:z,send:$}))),{messages:f,suggestions:v,loading:y,send:$,reset:z}}const K=function(e,t,r){function n(t){return t!==R.leftSquareBracket?(e.exit("citeMarker"),e.enter("citeData"),e.enter(T.chunkString,{contentType:"string"}),o(t)):(e.consume(t),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 r(n);return e.consume(n),e.exit("citeMarker"),e.exit("cite"),t(n)}(n)):_(n)||n===R.eof||n>57||n<48?r(n):(e.consume(n),o)}return function(t){return t!==R.leftSquareBracket?r(t):(e.enter("cite"),e.enter("citeMarker"),n(t))}},X=function(){const e=this.data();e.micromarkExtensions.push({text:{[R.leftSquareBracket]:{tokenize:K}}}),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=g.Image,W={pre:e=>{let{children:t}=e;const r=n(null);return z(Z,{ref:r,children:[$(Y,{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 $("a",{...n,href:r,target:o})},img:e=>{let{node:t,...r}=e;return $(J,{...r})}},G=[[C,{singleDollarTextMath:!1}],F,E],Q=[S,[D,{detect:!1,ignoreMissing:!0}]],V=i((e=>{let{content:t,components:r,cite:n}=e;return t=t.replace(/\\\(\s(.+?)\s\\\)/g,"$$$$ $1 $$$$"),$(ee,{remarkPlugins:a((()=>n?[...G,X]:G),[n]),rehypePlugins:Q,components:a((()=>({...W,...r})),[r]),children:t})})),Y=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,useImperativeHandl
|
|
|
18
18
|
&:hover {
|
|
19
19
|
opacity: 1;
|
|
20
20
|
}
|
|
21
|
-
`,
|
|
21
|
+
`,Z=f.pre`
|
|
22
22
|
position: relative;
|
|
23
23
|
|
|
24
24
|
&:hover {
|
|
25
|
-
${
|
|
25
|
+
${Y} {
|
|
26
26
|
pointer-events: all;
|
|
27
27
|
transform: translateX(0px);
|
|
28
28
|
opacity: 0.5;
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
-
`,
|
|
31
|
+
`,ee=f(q)`
|
|
32
32
|
-ms-text-size-adjust: 100%;
|
|
33
33
|
-webkit-text-size-adjust: 100%;
|
|
34
34
|
line-height: 1.8;
|
|
@@ -298,7 +298,7 @@ import*as e from"react";import{useCallback as t,useState as r,useImperativeHandl
|
|
|
298
298
|
.hljs-strong {
|
|
299
299
|
font-weight: 700;
|
|
300
300
|
}
|
|
301
|
-
`,
|
|
301
|
+
`,te=s(null);function re(){const e=l(te);if(!e)throw new Error("useContext must be used within a Provider");return e}function ne(e){let{children:t,...r}=e;return $(te.Provider,{value:r,children:t})}const oe=g.Image;function ie(e){let{src:t,...r}=e;const{imageResolver:n}=re();return n&&t&&(t=n(t)),$(ae,{children:$(oe,{src:t,...r})})}const ae=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,useImperativeHandl
|
|
|
323
323
|
max-height: 100%;
|
|
324
324
|
max-width: 100%;
|
|
325
325
|
}
|
|
326
|
-
`;function
|
|
326
|
+
`;function se(e){let{tool:t}=e;const[n,o]=r(!1),{logLevel:i="none"}=re();let a=null;t.content&&("string"==typeof t.content?a=$(V,{content:t.content}):"image"===t.content.type&&(a=$(ie,{src:t.content.image})));const s="response"in t;return z(c,{children:["stats"==i&&$("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?t.error?$("i",{className:"bi bi-x-circle-fill text-danger"}):$("i",{className:"bi bi-check-circle-fill text-success"}):$(B,{animation:"border",variant:"primary",size:"sm"}),$("span",{className:"text-muted",children:s?"已使用":"正在使用"}),$("span",{children:t.title})]})}),"all"==i&&$("div",{className:"mb-2",children:z("div",n&&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:[t.error?$("i",{className:"bi bi-x-circle-fill text-danger"}):$("i",{className:"bi bi-check-circle-fill text-success"}),$("span",{className:"text-muted",children:"已使用"}),$("span",{children:t.title}),$("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:[$("div",{className:"d-flex align-items-center p-1 px-2 fs-7 gap-2",children:$("span",{className:"text-muted",children:"参数"})}),$("div",{className:"border-top p-2 overflow-hidden",children:t.arguments})]}),z("div",{className:"border rounded bg-light",children:[$("div",{className:"d-flex align-items-center p-1 px-2 fs-7 gap-2",children:$("span",{className:"text-muted",children:"响应"})}),$(le,{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?$("i",{className:"bi bi-x-circle-fill text-danger"}):$("i",{className:"bi bi-check-circle-fill text-success"}):$(B,{animation:"border",variant:"primary",size:"sm"}),$("span",{className:"text-muted",children:s?"已使用":"正在使用"}),$("span",{children:t.title}),s&&$("i",{className:"bi bi-caret-down-fill text-muted"})]})}),a]})}const le=f.div`
|
|
327
327
|
white-space: pre-wrap;
|
|
328
|
-
`;var
|
|
328
|
+
`;var ce,de,me;function he(){return he=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},he.apply(this,arguments)}const ue=t=>e.createElement("svg",he({xmlns:"http://www.w3.org/2000/svg",width:20,height:10,fill:"#fff",viewBox:"0 0 120 30"},t),ce||(ce=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"}))),de||(de=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"}))),me||(me=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 pe=function(e){let{ext:t}=e;const{result:r}=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(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?$("img",{width:30,height:30,src:r}):null};function ge(e){let{className:t,name:r,size:n,loading:o,error:i,onRemove:a}=e;const s=O.extname(r).substring(1),l=z(xe,{className:t,$error:!!i,children:[z(ve,{children:[$(pe,{ext:s}),o&&$(B,{variant:"primary"})]}),z(be,{children:[$("h4",{children:r}),$("p",{children:x(n,1)})]}),a&&$(fe,{onClick:e=>{e.preventDefault(),a()},children:$("i",{className:"bi bi-trash3"})})]});return i?$(y,{placement:"top",tooltip:i,children:l}):l}const fe=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,useImperativeHandl
|
|
|
340
340
|
color: var(--bs-danger);
|
|
341
341
|
background-color: var(--bs-danger-bg-subtle);
|
|
342
342
|
}
|
|
343
|
-
`,
|
|
343
|
+
`,be=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,useImperativeHandl
|
|
|
361
361
|
line-height: 20px;
|
|
362
362
|
margin-bottom: 0;
|
|
363
363
|
}
|
|
364
|
-
`,
|
|
364
|
+
`,ve=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,useImperativeHandl
|
|
|
375
375
|
position: absolute;
|
|
376
376
|
}
|
|
377
377
|
|
|
378
|
-
`,
|
|
378
|
+
`,xe=f.div`
|
|
379
379
|
display: flex;
|
|
380
380
|
gap: .5rem;
|
|
381
381
|
padding: .5rem;
|
|
@@ -388,10 +388,10 @@ import*as e from"react";import{useCallback as t,useState as r,useImperativeHandl
|
|
|
388
388
|
border-color: var(--bs-primary);
|
|
389
389
|
}
|
|
390
390
|
|
|
391
|
-
${e=>e.$error&&
|
|
391
|
+
${e=>e.$error&&v`
|
|
392
392
|
border-color: var(--bs-danger) !important;
|
|
393
393
|
`}
|
|
394
|
-
`;var
|
|
394
|
+
`;var ye=d((function(e,t){let{children:r,tooltip:n,onClick:o,...i}=e;const a=$(ke,{ref:t,onClick:o,...i,children:r});return n?$(y,{tooltip:n,placement:"top",children:a}):a}));const ke=f.div`
|
|
395
395
|
align-items: center;
|
|
396
396
|
justify-content: center;
|
|
397
397
|
border-radius: .375rem;
|
|
@@ -415,12 +415,12 @@ import*as e from"react";import{useCallback as t,useState as r,useImperativeHandl
|
|
|
415
415
|
background-color: var(--bs-gray-200);
|
|
416
416
|
}
|
|
417
417
|
}
|
|
418
|
-
`,
|
|
419
|
-
${e=>e.$deleted&&
|
|
418
|
+
`,we=i((e=>{let{message:t,actions:r,updater:n}=e;const{query:o,files:i=[],chunks:s,annotation:l}=t,{user:d,bot:m,logLevel:h="none"}=re(),u=a((()=>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 z(M,{children:[(o||i.length>0)&&z(Ce,{$reverse:!0,children:[d&&$(Me,{children:$("img",{src:d.avatar})}),z(qe,{children:[o&&$(V,{content:o}),i.length>0&&i.map(((e,t)=>{let{name:r,size:n,path:o}=e;return w(o)?$(ie,{src:`/uploads/${o}`},t):$(Ne,{children:$(ge,{name:r,size:n})},t)}))]})]}),s&&z(Ce,{children:[$(Me,{children:$("img",{src:m.avatar})}),z(qe,{children:[(o||i.length>0)&&z($e,{children:[$(b,{placement:"top",content:u,as:ye,tooltip:!0}),r?.({Component:ye,message:t,content:u,setMessage:n})]}),$(ze,{children:["stats","all"].includes(h)&&t.stats&&z(M,{children:[z("span",{children:["耗时 ",t.stats.latency/1e3," 秒"]}),z("span",{children:["花费 Token ",t.stats.usage]})]})}),$(je,{$deleted:!!l,children:s.length>0&&s.map(((e,t)=>z(c,{children:[e.content&&$(V,{content:e.content}),e.tools.map(((e,t)=>$(se,{tool:e},t))),e.error&&$(V,{content:`[${e.error}]`})]},t)))}),l&&z("div",{children:[z("div",{className:"d-flex align-items-center",children:[$("span",{className:"fs-7 text-secondary me-2",children:"标注的答案"}),$("hr",{className:"flex-fill"})]}),$(V,{content:l.answer})]}),t.loading&&$(ue,{})]})]})]})})),je=f.div`
|
|
419
|
+
${e=>e.$deleted&&v`
|
|
420
420
|
text-decoration-line: line-through;
|
|
421
421
|
color: var(--bs-secondary);
|
|
422
422
|
`}
|
|
423
|
-
`,
|
|
423
|
+
`,Ne=f.div`
|
|
424
424
|
width: 100%;
|
|
425
425
|
margin-bottom: .5rem;
|
|
426
426
|
margin-top: .5rem;
|
|
@@ -432,7 +432,7 @@ import*as e from"react";import{useCallback as t,useState as r,useImperativeHandl
|
|
|
432
432
|
&:last-child {
|
|
433
433
|
margin-bottom: 0;
|
|
434
434
|
}
|
|
435
|
-
|
|
435
|
+
`,$e=f.div`
|
|
436
436
|
position: absolute;
|
|
437
437
|
top: -1.1rem;
|
|
438
438
|
right: 0;
|
|
@@ -440,7 +440,7 @@ import*as e from"react";import{useCallback as t,useState as r,useImperativeHandl
|
|
|
440
440
|
gap: .5rem;
|
|
441
441
|
opacity: 0;
|
|
442
442
|
z-index: 1;
|
|
443
|
-
`,
|
|
443
|
+
`,ze=f.div`
|
|
444
444
|
position: absolute;
|
|
445
445
|
bottom: -1.4rem;
|
|
446
446
|
left: 0;
|
|
@@ -453,7 +453,7 @@ import*as e from"react";import{useCallback as t,useState as r,useImperativeHandl
|
|
|
453
453
|
display: flex;
|
|
454
454
|
opacity: 0;
|
|
455
455
|
z-index: 1;
|
|
456
|
-
`,
|
|
456
|
+
`,Me=f.div`
|
|
457
457
|
width: 35px;
|
|
458
458
|
height: 35px;
|
|
459
459
|
border-radius: 50%;
|
|
@@ -463,7 +463,7 @@ import*as e from"react";import{useCallback as t,useState as r,useImperativeHandl
|
|
|
463
463
|
width: 100%;
|
|
464
464
|
height: 100%;
|
|
465
465
|
}
|
|
466
|
-
`,
|
|
466
|
+
`,qe=f.div`
|
|
467
467
|
padding: .875rem;
|
|
468
468
|
background-color: rgb(243, 243, 243);
|
|
469
469
|
border-radius: var(--bs-border-radius-lg);
|
|
@@ -483,18 +483,18 @@ import*as e from"react";import{useCallback as t,useState as r,useImperativeHandl
|
|
|
483
483
|
}
|
|
484
484
|
|
|
485
485
|
&:hover {
|
|
486
|
-
${
|
|
486
|
+
${ze}, ${$e} {
|
|
487
487
|
opacity: 1;
|
|
488
488
|
}
|
|
489
489
|
}
|
|
490
|
-
|
|
490
|
+
`,Ce=f.div`
|
|
491
491
|
display: flex;
|
|
492
492
|
justify-content: flex-start;
|
|
493
493
|
padding: 1rem 0 1rem 0;
|
|
494
|
-
${e=>e.$reverse&&
|
|
494
|
+
${e=>e.$reverse&&v`
|
|
495
495
|
flex-direction: row-reverse;
|
|
496
496
|
|
|
497
|
-
${
|
|
497
|
+
${qe} {
|
|
498
498
|
background: rgba(var(--bs-primary-rgb), 0.1);
|
|
499
499
|
margin-right: 10px;
|
|
500
500
|
margin-left: 0;
|
|
@@ -509,15 +509,32 @@ import*as e from"react";import{useCallback as t,useState as r,useImperativeHandl
|
|
|
509
509
|
}
|
|
510
510
|
}
|
|
511
511
|
`};
|
|
512
|
-
`,
|
|
512
|
+
`,Ee=[".txt",".md",".pdf",".docx",".xlsx",".pptx",".png",".jpg"];function Fe(e){let{variables:t,values:r,onSubmit:n,onChange:o,children:i}=e;const a={},s=[],l={};return t.forEach((e=>{a[e.key]={type:"string",title:e.label},"textarea"===e.type?l[e.key]={"ui:widget":"textarea"}:"select"===e.type&&e.options?.length&&(a[e.key].enum=e.options,a[e.key].enumNames=e.options),e.required&&s.push(e.key)})),$(j,{schema:{type:"object",properties:a,required:s},formData:r,omitExtraData:!0,uiSchema:l,submitText:"开始对话",onSubmit:n,onChange:o,children:i})}function Se(e){let{chat:o,fileTypes:i,scrollRef:a,onMessages:s,onSuggestions:l,variables:c,minRows:d,toolbar:g,disabled:f,onLoading:b,autoFocus:v}=e;const x=n(null),k=n(null),[w,j]=r(""),[M,q]=h([]),[C,E]=r(!1),F=i&&i.length>0?i:Ee,{loading:S,messages:D,suggestions:R,send:T}=H({...o,onSuccess(){requestAnimationFrame((()=>{x.current?.focus()})),o.onSuccess?.()}}),[_,B]=r((()=>{const e=D.filter((e=>!!e.query));if(e.length>0){return e[e.length-1].variables}}));m((()=>{s(D)}),[D]),m((()=>{l(R)}),[R]),m((()=>{b?.(S)}),[S]),m((()=>{!i&&M.length>0&&q([])}),[i]),m((()=>{const e=a.current;if(e&&T){const t=e=>{e.target instanceof HTMLAnchorElement&&"#!question"===e.target.hash&&(e.preventDefault(),T(e.target.text))};return e.addEventListener("click",t),()=>{e.removeEventListener("click",t)}}}),[a,T]);const O=t((e=>{let{target:t}=e;if(t.files){const e=Array.from(t.files).filter((e=>!!F.includes(L.extname(e.name))&&(!(e.size>20971520)&&e))).slice(0,6-M.length);q((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:`${o.url}/upload`,data:t};o.transformRequest&&(r=o.transformRequest("upload",r));const n=await u(r);q((t=>{const r=t.find((t=>t.file===e));r&&(r.path=n.path)}))}catch(t){const r=p(t)?t.message:"unknown error";q((t=>{const n=t.find((t=>t.file===e));n&&(n.error=r)}))}}))}t.value=""}),[M,F]),P=M.flatMap((e=>{let{file:t,path:r}=e;return r?[{name:t.name,size:t.size,path:r}]:[]})),I=()=>{(w||P.length>0)&&(c?T(w,P,{..._,...c.values}):T(w,P),j(""),q([]))};if(c){const e=c.config.filter((e=>!(e.key in(c.values||{})))),t=function(t){let r=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return!!t&&e.every((e=>{const n=!e.required||t?.[e.key];return!n&&r&&N.error(`${e.label}不能为空`),n}))};if(e.length>0&&!t(_))return $(Re,{children:$(De,{children:$(Fe,{values:_,variables:e,onSubmit:e=>{let{formData:r}=e;if(t(r,!0))return B(r),!0}})})})}return z(Ae,{children:[g,z(Oe,{$focused:C&&!S,children:[M.length>0&&$(_e,{children:M.map(((e,t)=>{let{file:r,error:n,path:o}=e;const i=void 0===n&&void 0===o;return $(Te,{name:r.name,size:r.size,error:n,loading:i,onRemove:()=>{q((e=>{const t=e.findIndex((e=>e.file===r));-1!==t&&e.splice(t,1)}))}},t)}))}),z(Le,{children:[$(A,{disabled:S||f,ref:x,placeholder:"请输入你的问题, Enter+Shift换行, Enter发送",minRows:d,maxRows:5,value:w,onChange:e=>j(e.target.value),onKeyDown:e=>{"Enter"!==e.key||e.shiftKey||(e.preventDefault(),I())},autoFocus:v,onFocus:()=>E(!0),onBlur:()=>E(!1)}),i&&$(y,{tooltip:"可上传不超过6个小于20MB的文件",placement:"top",children:z(Be,{disabled:M.length>=6,onClick:()=>k.current?.click(),children:[$("input",{onChange:O,multiple:!0,accept:F.join(","),ref:k,type:"file",hidden:!0}),$("i",{className:"bi bi-file-earmark-arrow-up"})]})}),$(Be,{className:"text-primary",disabled:!w&&0===P.length,onClick:e=>{e.preventDefault(),I()},children:$("i",{className:"bi bi-send-fill"})})]})]})]})}const De=f.div`
|
|
513
|
+
border-radius: var(--bs-border-radius-lg);
|
|
514
|
+
box-shadow: 0.125rem 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
|
|
515
|
+
margin: 1rem;
|
|
516
|
+
padding: 1rem;
|
|
517
|
+
width: 100%;
|
|
518
|
+
max-width: 500px;
|
|
519
|
+
`,Re=f.div`
|
|
520
|
+
position: absolute;
|
|
521
|
+
left: 0;
|
|
522
|
+
right: 0;
|
|
523
|
+
top: 0;
|
|
524
|
+
bottom: 0;
|
|
525
|
+
background: #FFF;
|
|
526
|
+
display: flex;
|
|
527
|
+
justify-content: center;
|
|
528
|
+
align-items: center;
|
|
529
|
+
`,Te=f(ge)`
|
|
513
530
|
width: calc((100% - .75rem) / 2);
|
|
514
|
-
`,
|
|
531
|
+
`,_e=f.div`
|
|
515
532
|
display: flex;
|
|
516
533
|
flex-wrap: wrap;
|
|
517
534
|
padding: .75rem;
|
|
518
535
|
gap: .75rem;
|
|
519
536
|
border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
|
|
520
|
-
`,
|
|
537
|
+
`,Be=f.button`
|
|
521
538
|
color: var(--bs-secondary);
|
|
522
539
|
cursor: pointer;
|
|
523
540
|
display: flex;
|
|
@@ -539,7 +556,7 @@ import*as e from"react";import{useCallback as t,useState as r,useImperativeHandl
|
|
|
539
556
|
background-color: var(--bs-gray-200);
|
|
540
557
|
}
|
|
541
558
|
|
|
542
|
-
`,
|
|
559
|
+
`,Le=f.div`
|
|
543
560
|
display: flex;
|
|
544
561
|
padding: .5rem .5rem .5rem 1rem;
|
|
545
562
|
gap: .25rem;
|
|
@@ -556,26 +573,44 @@ import*as e from"react";import{useCallback as t,useState as r,useImperativeHandl
|
|
|
556
573
|
color: rgba(54, 54, 54, .3);
|
|
557
574
|
}
|
|
558
575
|
}
|
|
559
|
-
`,
|
|
576
|
+
`,Oe=f.div`
|
|
560
577
|
background: #FFF;
|
|
561
578
|
border: var(--bs-border-width) var(--bs-border-style) ${e=>e.$focused?"var(--bs-primary)":"var(--bs-border-color)"};
|
|
562
579
|
border-radius: var(--bs-border-radius-lg);
|
|
563
580
|
box-shadow: 0.125rem 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
|
|
564
|
-
`,
|
|
581
|
+
`,Ae=f.div`
|
|
565
582
|
margin: 0 1rem 1rem;
|
|
566
|
-
`;function
|
|
583
|
+
`;function Pe(e){let{className:o,bot:i,user:a,input:s,logLevel:l,imageResolver:c,placeholder:d,actions:u,...p}=e;const[f,b]=h((()=>U(p.messages||[]))),[v,x]=r(!1),y=n(!s),k=n(null),w=t((()=>{const e=k.current;e&&requestAnimationFrame((()=>{e.scrollTo({top:e.scrollHeight})}))}),[]),{ref:j,height:N}=P(),[M,q]=r([]);return m((()=>{!v&&y.current||(v&&(y.current=!0),w())}),[N,v,y]),m((()=>{w()}),[M]),$(ne,{bot:i,user:a,logLevel:l,imageResolver:c,children:$(Ke,{className:o,children:z(g,{children:[$(Ue,{ref:k,children:z(He,{ref:j,children:[0===f.length&&d,f.slice(-30).map(((e,t)=>$(we,{actions:u,message:e,updater:t=>{b((r=>{const n=r.findIndex((t=>t.id===e.id));-1!==n&&t(r[n])}))}},t))),M.length>0&&$(Ie,{children:M.map(((e,t)=>$("a",{href:"#!question",children:e},t)))})]})}),s&&$(Se,{...s,onMessages:b,onSuggestions:q,scrollRef:k,onLoading:x})]})})})}const Ie=f.div`
|
|
584
|
+
display: flex;
|
|
585
|
+
flex-direction: column;
|
|
586
|
+
align-items: flex-start;
|
|
587
|
+
gap: .5rem;
|
|
588
|
+
padding: 1rem 0 1rem 45px;
|
|
589
|
+
|
|
590
|
+
a {
|
|
591
|
+
background: rgb(243, 243, 243);
|
|
592
|
+
padding: .5rem 1rem;
|
|
593
|
+
border-radius: var(--bs-border-radius-lg);
|
|
594
|
+
|
|
595
|
+
&:hover {
|
|
596
|
+
color: inherit;
|
|
597
|
+
background: var(--bs-secondary-bg-subtle);
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
`,Ue=f.div`
|
|
567
601
|
display: flex;
|
|
568
602
|
flex-direction: column;
|
|
569
603
|
flex: 1;
|
|
570
604
|
overflow-y: auto;
|
|
571
605
|
padding: 0 1rem;
|
|
572
606
|
margin-bottom: .5rem;
|
|
573
|
-
`,
|
|
607
|
+
`,He=f.div`
|
|
574
608
|
display: flex;
|
|
575
609
|
flex-direction: column;
|
|
576
610
|
flex: 1;
|
|
577
|
-
`,
|
|
611
|
+
`,Ke=f.div`
|
|
578
612
|
display: flex;
|
|
579
613
|
flex-direction: column;
|
|
580
614
|
height: 100%;
|
|
581
|
-
|
|
615
|
+
position: relative;
|
|
616
|
+
`;export{V as Markdown,Pe as MessageBox,Fe as VariableForm,I as pickQuestions,H 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.33",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"prebuild": "rimraf es types",
|
|
6
6
|
"build": "rollup -c --environment NODE_ENV:production",
|
|
@@ -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": "e73b41ad8790292c580844d9c04a2cadb1ae2de2"
|
|
69
69
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { ConversationMessage, LogLevel } from '../../types';
|
|
2
|
+
import { ConversationMessage, LogLevel, Variable } from '../../types';
|
|
3
3
|
import { ChatOptions } from '../../hooks/use-chat';
|
|
4
4
|
import { MessageActions } from './message-item';
|
|
5
5
|
interface Props {
|
|
@@ -23,6 +23,10 @@ interface Props {
|
|
|
23
23
|
chat: ChatOptions;
|
|
24
24
|
toolbar?: ReactNode;
|
|
25
25
|
autoFocus?: boolean;
|
|
26
|
+
variables?: {
|
|
27
|
+
config: Variable[];
|
|
28
|
+
values?: Record<string, string>;
|
|
29
|
+
};
|
|
26
30
|
};
|
|
27
31
|
actions?: MessageActions;
|
|
28
32
|
}
|
|
@@ -1,16 +1,21 @@
|
|
|
1
1
|
import { MutableRefObject, ReactNode } from 'react';
|
|
2
|
-
import { Message } from '../../types';
|
|
2
|
+
import { Message, Variable } from '../../types';
|
|
3
3
|
import { ChatOptions } from '../../hooks/use-chat';
|
|
4
4
|
interface Props {
|
|
5
5
|
chat: ChatOptions;
|
|
6
|
+
variables?: {
|
|
7
|
+
config: Variable[];
|
|
8
|
+
values?: Record<string, string>;
|
|
9
|
+
};
|
|
6
10
|
fileTypes?: string[];
|
|
7
11
|
minRows?: number;
|
|
8
12
|
scrollRef: MutableRefObject<HTMLDivElement | null>;
|
|
9
13
|
onMessages: (messages: Message[]) => void;
|
|
14
|
+
onSuggestions: (suggestions: string[]) => void;
|
|
10
15
|
toolbar?: ReactNode;
|
|
11
16
|
disabled?: boolean;
|
|
12
17
|
onLoading?: (loading: boolean) => void;
|
|
13
18
|
autoFocus?: boolean;
|
|
14
19
|
}
|
|
15
|
-
export default function ({ chat, fileTypes, scrollRef, onMessages, minRows, toolbar, disabled, onLoading, autoFocus }: Props): JSX.Element;
|
|
20
|
+
export default function ({ chat, fileTypes, scrollRef, onMessages, onSuggestions, variables, minRows, toolbar, disabled, onLoading, autoFocus }: Props): JSX.Element;
|
|
16
21
|
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { Variable } from '../types';
|
|
3
|
+
import { FormProps } from '@topthink/components';
|
|
4
|
+
interface Props {
|
|
5
|
+
variables: Variable[];
|
|
6
|
+
values?: Record<string, string>;
|
|
7
|
+
onSubmit?: FormProps['onSubmit'];
|
|
8
|
+
onChange?: FormProps['onChange'];
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
export default function VariableForm({ variables, values, onSubmit, onChange, children }: Props): JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -3,19 +3,23 @@ import { Chat, Conversation, Message } from '../types';
|
|
|
3
3
|
import { RequestConfig } from '@topthink/components';
|
|
4
4
|
export interface ChatOptions {
|
|
5
5
|
url: string;
|
|
6
|
-
transformRequest?: (scene: 'chat' | 'upload', config: Exclude<RequestConfig, string>) => Exclude<RequestConfig, string>;
|
|
6
|
+
transformRequest?: (scene: 'chat' | 'upload' | 'suggestion', config: Exclude<RequestConfig, string>) => Exclude<RequestConfig, string>;
|
|
7
7
|
onSuccess?: () => void;
|
|
8
8
|
onboarding?: {
|
|
9
9
|
enable?: boolean;
|
|
10
10
|
prologue: string;
|
|
11
11
|
questions: string[];
|
|
12
12
|
};
|
|
13
|
+
suggestion?: {
|
|
14
|
+
enable?: boolean;
|
|
15
|
+
};
|
|
13
16
|
conversation?: Conversation;
|
|
14
17
|
ref?: MutableRefObject<Chat | null>;
|
|
15
18
|
}
|
|
16
|
-
export default function useChat({ url, onboarding, onSuccess, ref, transformRequest, ...props }: ChatOptions): {
|
|
19
|
+
export default function useChat({ url, onboarding, suggestion, onSuccess, ref, transformRequest, ...props }: ChatOptions): {
|
|
17
20
|
messages: Message[];
|
|
21
|
+
suggestions: string[];
|
|
18
22
|
loading: boolean;
|
|
19
|
-
send: (query: string, files?: Message['files']) => Promise<void>;
|
|
23
|
+
send: (query: string, files?: Message['files'], variables?: Record<string, string>) => Promise<void>;
|
|
20
24
|
reset: (conversation?: Conversation) => void;
|
|
21
25
|
};
|
package/types/index.d.ts
CHANGED
|
@@ -2,4 +2,5 @@ export * from './types';
|
|
|
2
2
|
export { default as useChat } from './hooks/use-chat';
|
|
3
3
|
export { default as MessageBox } from './components/message-box';
|
|
4
4
|
export { default as Markdown } from './components/markdown';
|
|
5
|
+
export { default as VariableForm } from './components/variable-form';
|
|
5
6
|
export { default as pickQuestions } from './utils/pick-questions';
|
package/types/types.d.ts
CHANGED
|
@@ -25,6 +25,7 @@ export interface Message {
|
|
|
25
25
|
name: string;
|
|
26
26
|
size: number;
|
|
27
27
|
}[];
|
|
28
|
+
variables?: Record<string, string>;
|
|
28
29
|
chunks?: {
|
|
29
30
|
content: string;
|
|
30
31
|
tools: ToolMessage[];
|
|
@@ -41,6 +42,13 @@ export interface Message {
|
|
|
41
42
|
answer: string;
|
|
42
43
|
};
|
|
43
44
|
}
|
|
45
|
+
export interface Variable {
|
|
46
|
+
key: string;
|
|
47
|
+
label: string;
|
|
48
|
+
type: 'text' | 'textarea' | 'select';
|
|
49
|
+
options?: string[];
|
|
50
|
+
required?: boolean;
|
|
51
|
+
}
|
|
44
52
|
export interface Conversation {
|
|
45
53
|
id: string;
|
|
46
54
|
title: string;
|
|
@@ -52,6 +60,7 @@ export interface ConversationMessage {
|
|
|
52
60
|
id: string;
|
|
53
61
|
query: string;
|
|
54
62
|
files: [];
|
|
63
|
+
variables?: Record<string, string>;
|
|
55
64
|
chunks: {
|
|
56
65
|
content?: '';
|
|
57
66
|
error?: string;
|