@topthink/chat 1.0.1 → 1.0.2
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 +34 -38
- package/package.json +59 -59
- package/types/components/message-box/index.d.ts +14 -4
- package/types/components/message-box/input-box.d.ts +2 -1
- package/types/components/message-box/message-item.d.ts +9 -2
- package/types/hooks/use-chat.d.ts +4 -2
- package/types/components/lightbox/Image.d.ts +0 -2
- package/types/components/lightbox/index.d.ts +0 -16
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,useState as t,useEffect as o,useImperativeHandle as n,memo as i,useRef as s,Fragment as a}from"react";import{useImmer as l,request as c,isRequestError as d,Lightbox as m,styled as h,Clipboard as p,css as u,formatSize as g,Tooltip as f,useAsync as b,isImageUrl as v,getAbsoluteUrl as x}from"@topthink/components";import{jsx as y,jsxs as k,Fragment as w}from"react/jsx-runtime";import j from"react-markdown";import"katex/dist/katex.min.css";import N from"remark-math";import z from"remark-breaks";import M from"remark-gfm";import E from"rehype-katex";import $ from"rehype-highlight";import{Spinner as q}from"react-bootstrap";import*as C from"path";import F from"path";import P from"react-textarea-autosize";function R(e){let{url:i,transformRequest:s,onboarding:a,onSuccess:m,ref:h,...p}=e;const u=r((function(){let e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];const r=[];if(a){let e=a.questions.filter((e=>!!e.trim()));if(e.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}r.push({chunks:[{content:[a.prologue,...e.map((e=>`[${e}](#!question)`))].join("\n"),tools:[]}]})}return p.conversation&&e?r.concat(p.conversation.messages):r}),[a,p.conversation]),[g,f]=l(u),[b,v]=t(!1),[x,y]=t(p.conversation?.id);o((()=>{x||f(u(!1))}),[x]);const k=r((async function(e){let r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];if(e||r.length>0){v(!0),f((t=>{t.push({query:e,files:r,chunks:[],loading:!0})}));let t=0,o="";try{await c({method:"post",url:i,data:{query:e,files:r,conversation:x},transformRequest:s,onDownloadProgress:e=>{const r=e.target,{responseText:n}=r;for(;t<e.loaded;){const e=n.substring(t,++t);if(o+=e,"\n"===e){const e=o.match(/^data:(?<data>.*)/);if(e){const r=e.groups.data.trim();if("[DONE]"!=r)try{const e=JSON.parse(r);e.conversation?y(e.conversation):f((r=>{const t=r[r.length-1];if(t.chunks)if(e.chunks){const r=e.chunks.index;if(t.chunks[r]||(t.chunks[r]={content:"",tools:[]}),e.chunks.error)t.chunks[r].error=e.chunks.error;else if(e.chunks.tools){const o=e.chunks.tools.index;"response"in e.chunks.tools?(t.chunks[r].tools[o].response=e.chunks.tools.response,t.chunks[r].tools[o].error=e.chunks.tools.error):"content"in e.chunks.tools?t.chunks[r].tools[o].content=e.chunks.tools.content:t.chunks[r].tools[o]={name:e.chunks.tools.name,title:e.chunks.tools.title,arguments:e.chunks.tools.arguments}}else e.chunks.content&&(t.chunks[r].content+=e.chunks.content)}else e.stats&&(t.stats=e.stats)}))}catch(e){console.error(e)}else f((e=>{e[e.length-1].loading=!1}))}o=""}}}})}catch(e){let r="未知错误";d(e)&&(r=401==e.response?.status?"未授权或授权已过期,请刷新页面后重试":"string"==typeof e.errors?e.errors:Object.values(e.errors).join("\n")),f((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}))}v(!1),m?.()}}),[s,x]),w=r((()=>{b||(y(void 0),f(u(!1)))}),[b,u]);return n(h,(()=>({reset:w,send:k}))),{messages:g,loading:b,send:k,reset:w}}const T=m.Image,_=i((e=>{let{content:r,components:t}=e;return y(A,{remarkPlugins:[[N,{singleDollarTextMath:!1}],M,z],rehypePlugins:[E,[$,{detect:!1,ignoreMissing:!0}]],components:{pre:e=>{let{children:r}=e;const t=s(null);return k(O,{ref:t,children:[y(D,{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 y("a",{...o,href:t,target:n})},img:e=>{let{node:r,...t}=e;return y(T,{...t})},...t},children:r})})),D=h(p)`
|
|
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,useEffect as o,use
|
|
|
18
18
|
&:hover {
|
|
19
19
|
opacity: 1;
|
|
20
20
|
}
|
|
21
|
-
`,
|
|
21
|
+
`,O=h.pre`
|
|
22
22
|
position: relative;
|
|
23
23
|
|
|
24
24
|
&:hover {
|
|
25
|
-
${
|
|
25
|
+
${D} {
|
|
26
26
|
pointer-events: all;
|
|
27
27
|
transform: translateX(0px);
|
|
28
28
|
opacity: 0.5;
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
-
`,
|
|
31
|
+
`,A=h(j)`
|
|
32
32
|
-ms-text-size-adjust: 100%;
|
|
33
33
|
-webkit-text-size-adjust: 100%;
|
|
34
34
|
line-height: 1.8;
|
|
@@ -299,7 +299,7 @@ import*as e from"react";import{useCallback as t,useState as r,useEffect as o,use
|
|
|
299
299
|
.hljs-strong {
|
|
300
300
|
font-weight: 700;
|
|
301
301
|
}
|
|
302
|
-
|
|
302
|
+
`,S=m.Image;function B(e){return y(U,{children:y(S,{...e})})}const U=h.div`
|
|
303
303
|
margin-bottom: .5rem;
|
|
304
304
|
margin-top: .5rem;
|
|
305
305
|
border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
|
|
@@ -324,9 +324,9 @@ import*as e from"react";import{useCallback as t,useState as r,useEffect as o,use
|
|
|
324
324
|
max-height: 100%;
|
|
325
325
|
max-width: 100%;
|
|
326
326
|
}
|
|
327
|
-
`;function
|
|
327
|
+
`;function I(e){let{tool:r,showProcess:o}=e;const[n,i]=t(!1);let s=null;r.content&&("string"==typeof r.content?s=y(_,{content:r.content}):"image"===r.content.type&&(s=y(B,{src:r.content.image})));const l="response"in r;return k(a,{children:["all"==o&&y("div",{className:"mb-2",children:k("div",n&&l?{className:"shadow-sm rounded bg-white fs-7",children:[k("div",{onClick:()=>i(!1),role:"button",className:"d-flex align-items-center p-1 px-2 gap-2",children:[r.error?y("i",{className:"bi bi-x-circle-fill text-danger"}):y("i",{className:"bi bi-check-circle-fill text-success"}),y("span",{className:"text-muted",children:"已使用"}),y("span",{children:r.title}),y("i",{className:"bi bi-caret-up-fill text-muted"})]}),k("div",{className:"border-top p-2 d-flex flex-column gap-2",children:[k("div",{className:"border rounded bg-light",children:[y("div",{className:"d-flex align-items-center p-1 px-2 fs-7 gap-2",children:y("span",{className:"text-muted",children:"参数"})}),y("div",{className:"border-top p-2 overflow-hidden",children:r.arguments})]}),k("div",{className:"border rounded bg-light",children:[y("div",{className:"d-flex align-items-center p-1 px-2 fs-7 gap-2",children:y("span",{className:"text-muted",children:"响应"})}),y(L,{className:"border-top p-2 overflow-hidden",children:r.response||"None"})]})]})]}:{onClick:()=>i(l),role:"button",className:"d-inline-flex align-items-center shadow-sm rounded bg-white p-1 px-2 fs-7 gap-2",children:[l?r.error?y("i",{className:"bi bi-x-circle-fill text-danger"}):y("i",{className:"bi bi-check-circle-fill text-success"}):y(q,{animation:"border",variant:"primary",size:"sm"}),y("span",{className:"text-muted",children:l?"已使用":"正在使用"}),y("span",{children:r.title}),l&&y("i",{className:"bi bi-caret-down-fill text-muted"})]})}),s]})}const L=h.div`
|
|
328
328
|
white-space: pre-wrap;
|
|
329
|
-
`;var
|
|
329
|
+
`;var H,K,X;function J(){return J=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},J.apply(this,arguments)}const W=r=>e.createElement("svg",J({xmlns:"http://www.w3.org/2000/svg",width:20,height:10,fill:"#fff",viewBox:"0 0 120 30"},r),H||(H=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"}))),K||(K=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"}))),X||(X=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 G=function(e){let{ext:r}=e;const{result:t}=b((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?y("img",{width:30,height:30,src:t}):null};function Q(e){let{className:r,name:t,size:o,loading:n,error:i,onRemove:s}=e;const a=F.extname(t).substring(1),l=k(ee,{className:r,$error:!!i,children:[k(Z,{children:[y(G,{ext:a}),n&&y(q,{variant:"primary"})]}),k(Y,{children:[y("h4",{children:t}),y("p",{children:g(o,1)})]}),s&&y(V,{onClick:e=>{e.preventDefault(),s()},children:y("i",{className:"bi bi-trash3"})})]});return i?y(f,{placement:"top",tooltip:i,children:l}):l}const V=h.div`
|
|
330
330
|
width: 1.75rem;
|
|
331
331
|
height: 1.75rem;
|
|
332
332
|
align-items: center;
|
|
@@ -341,7 +341,7 @@ import*as e from"react";import{useCallback as t,useState as r,useEffect as o,use
|
|
|
341
341
|
color: var(--bs-danger);
|
|
342
342
|
background-color: var(--bs-danger-bg-subtle);
|
|
343
343
|
}
|
|
344
|
-
`,
|
|
344
|
+
`,Y=h.div`
|
|
345
345
|
flex: 1;
|
|
346
346
|
overflow: hidden;
|
|
347
347
|
|
|
@@ -362,7 +362,7 @@ import*as e from"react";import{useCallback as t,useState as r,useEffect as o,use
|
|
|
362
362
|
line-height: 20px;
|
|
363
363
|
margin-bottom: 0;
|
|
364
364
|
}
|
|
365
|
-
`,
|
|
365
|
+
`,Z=h.div`
|
|
366
366
|
position: relative;
|
|
367
367
|
width: 3rem;
|
|
368
368
|
height: 3rem;
|
|
@@ -376,7 +376,7 @@ import*as e from"react";import{useCallback as t,useState as r,useEffect as o,use
|
|
|
376
376
|
position: absolute;
|
|
377
377
|
}
|
|
378
378
|
|
|
379
|
-
`,
|
|
379
|
+
`,ee=h.div`
|
|
380
380
|
display: flex;
|
|
381
381
|
gap: .5rem;
|
|
382
382
|
padding: .5rem;
|
|
@@ -392,7 +392,7 @@ import*as e from"react";import{useCallback as t,useState as r,useEffect as o,use
|
|
|
392
392
|
${e=>e.$error&&u`
|
|
393
393
|
border-color: var(--bs-danger) !important;
|
|
394
394
|
`}
|
|
395
|
-
`,
|
|
395
|
+
`,re=i((e=>{let{bot:r,user:t,message:o,showProcess:n="none"}=e;const{query:i,files:s=[],chunks:l}=o;return k(w,{children:[(i||s.length>0)&&k(le,{$reverse:!0,children:[t&&y(se,{children:y("img",{src:t.avatar})}),k(ae,{children:[i&&y(_,{content:i}),s.length>0&&s.map(((e,r)=>{let{name:t,size:o,path:n}=e;return v(n)?y(B,{src:x(`/uploads/${n}`)},r):y(te,{children:y(Q,{name:t,size:o})},r)}))]})]}),l&&k(le,{children:[y(se,{children:y("img",{src:r.avatar})}),k(ae,{children:[o.query&&y(ne,{children:y(p,{placement:"top",content:l.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),"")}),""),as:oe})}),y(ie,{children:["stats","all"].includes(n)&&o.stats&&k(w,{children:[k("span",{children:["耗时 ",o.stats.latency/1e3," 秒"]}),k("span",{children:["花费 Token ",o.stats.usage]})]})}),l.length>0&&l.map(((e,r)=>k(a,{children:[e.content&&y(_,{content:e.content}),e.tools.map(((e,r)=>y(I,{tool:e,showProcess:n},r))),e.error&&y(_,{content:`[${e.error}]`})]},r))),o.loading&&y(W,{})]})]})]})})),te=h.div`
|
|
396
396
|
width: 100%;
|
|
397
397
|
margin-bottom: .5rem;
|
|
398
398
|
margin-top: .5rem;
|
|
@@ -404,7 +404,7 @@ import*as e from"react";import{useCallback as t,useState as r,useEffect as o,use
|
|
|
404
404
|
&:last-child {
|
|
405
405
|
margin-bottom: 0;
|
|
406
406
|
}
|
|
407
|
-
`,
|
|
407
|
+
`,oe=h.div`
|
|
408
408
|
align-items: center;
|
|
409
409
|
justify-content: center;
|
|
410
410
|
border-radius: .375rem;
|
|
@@ -428,7 +428,7 @@ import*as e from"react";import{useCallback as t,useState as r,useEffect as o,use
|
|
|
428
428
|
background-color: var(--bs-gray-200);
|
|
429
429
|
}
|
|
430
430
|
}
|
|
431
|
-
`,
|
|
431
|
+
`,ne=h.div`
|
|
432
432
|
position: absolute;
|
|
433
433
|
top: -1.1rem;
|
|
434
434
|
right: 0;
|
|
@@ -436,7 +436,7 @@ import*as e from"react";import{useCallback as t,useState as r,useEffect as o,use
|
|
|
436
436
|
gap: .25rem;
|
|
437
437
|
opacity: 0;
|
|
438
438
|
z-index: 1;
|
|
439
|
-
`,
|
|
439
|
+
`,ie=h.div`
|
|
440
440
|
position: absolute;
|
|
441
441
|
bottom: -1.4rem;
|
|
442
442
|
left: 0;
|
|
@@ -449,7 +449,7 @@ import*as e from"react";import{useCallback as t,useState as r,useEffect as o,use
|
|
|
449
449
|
display: flex;
|
|
450
450
|
opacity: 0;
|
|
451
451
|
z-index: 1;
|
|
452
|
-
`,
|
|
452
|
+
`,se=h.div`
|
|
453
453
|
width: 35px;
|
|
454
454
|
height: 35px;
|
|
455
455
|
border-radius: 50%;
|
|
@@ -459,7 +459,7 @@ import*as e from"react";import{useCallback as t,useState as r,useEffect as o,use
|
|
|
459
459
|
width: 100%;
|
|
460
460
|
height: 100%;
|
|
461
461
|
}
|
|
462
|
-
`,
|
|
462
|
+
`,ae=h.div`
|
|
463
463
|
padding: .875rem;
|
|
464
464
|
background-color: rgb(243, 243, 243);
|
|
465
465
|
border-radius: var(--bs-border-radius-lg);
|
|
@@ -479,18 +479,18 @@ import*as e from"react";import{useCallback as t,useState as r,useEffect as o,use
|
|
|
479
479
|
}
|
|
480
480
|
|
|
481
481
|
&:hover {
|
|
482
|
-
${
|
|
482
|
+
${ie}, ${ne} {
|
|
483
483
|
opacity: 1;
|
|
484
484
|
}
|
|
485
485
|
}
|
|
486
|
-
`,
|
|
486
|
+
`,le=h.div`
|
|
487
487
|
display: flex;
|
|
488
488
|
justify-content: flex-start;
|
|
489
489
|
padding: 1rem 0 1rem 0;
|
|
490
490
|
${e=>e.$reverse&&u`
|
|
491
|
-
|
|
491
|
+
flex-direction: row-reverse;
|
|
492
492
|
|
|
493
|
-
${
|
|
493
|
+
${ae} {
|
|
494
494
|
background: rgba(var(--bs-primary-rgb), 0.1);
|
|
495
495
|
margin-right: 10px;
|
|
496
496
|
margin-left: 0;
|
|
@@ -505,45 +505,41 @@ import*as e from"react";import{useCallback as t,useState as r,useEffect as o,use
|
|
|
505
505
|
}
|
|
506
506
|
}
|
|
507
507
|
`};
|
|
508
|
-
|
|
508
|
+
`,ce=[".txt",".md",".pdf",".docx",".xlsx",".pptx",".png",".jpg"];function de(e){let{chat:n,fileTypes:i,scrollRef:a,onMessages:m,minRows:h}=e;const p=s(null),u=s(null),[g,b]=t(""),[v,x]=l([]),[w,j]=t(!1),N=i&&i.length>0?i:ce,{loading:z,messages:M,send:E}=R({...n,onSuccess(){requestAnimationFrame((()=>{p.current?.focus()})),n.onSuccess?.()}});o((()=>{m(M)}),[M]),o((()=>{const e=a.current;if(e&&E){const r=e=>{e.target instanceof HTMLAnchorElement&&"#!question"===e.target.hash&&(e.preventDefault(),E(e.target.text))};return e.addEventListener("click",r),()=>{e.removeEventListener("click",r)}}}),[a,E]);const $=r((e=>{let{target:r}=e;if(r.files){const e=Array.from(r.files).filter((e=>!!N.includes(C.extname(e.name))&&(!(e.size>20971520)&&e))).slice(0,6-v.length);x((r=>{r.push(...e.map((e=>({file:e}))))})),e.forEach((async e=>{try{const r=new FormData;r.set("file",e);const t=await c({method:"POST",url:`${n.url}/upload`,transformRequest:n.transformRequest,data:r});x((r=>{const o=r.find((r=>r.file===e));o&&(o.path=t.path)}))}catch(r){const t=d(r)?r.message:"unknown error";x((r=>{const o=r.find((r=>r.file===e));o&&(o.error=t)}))}}))}r.value=""}),[v,N]),q=v.flatMap((e=>{let{file:r,path:t}=e;return t?[{name:r.name,size:r.size,path:t}]:[]})),F=()=>{(g||q.length>0)&&(E(g,q),b(""),x([]))};return k(ge,{$focused:w,children:[v.length>0&&y(he,{children:v.map(((e,r)=>{let{file:t,error:o,path:n}=e;const i=void 0===o&&void 0===n;return y(me,{name:t.name,size:t.size,error:o,loading:i,onRemove:()=>{x((e=>{const r=e.findIndex((e=>e.file===t));-1!==r&&e.splice(r,1)}))}},r)}))}),k(ue,{children:[y(P,{disabled:z,ref:p,placeholder:"请输入你的问题, Enter+Shift换行, Enter发送",minRows:h,maxRows:5,value:g,onChange:e=>b(e.target.value),onKeyDown:e=>{"Enter"!==e.key||e.shiftKey||(e.preventDefault(),F())},onFocus:()=>j(!0),onBlur:()=>j(!1)}),i&&y(f,{tooltip:"可上传不超过6个小于20MB的文件",placement:"top",children:k(pe,{disabled:v.length>=6,onClick:()=>u.current?.click(),children:[y("input",{onChange:$,multiple:!0,accept:N.join(","),ref:u,type:"file",hidden:!0}),y("i",{className:"bi bi-file-earmark-arrow-up"})]})}),y(pe,{className:"text-primary",disabled:!g&&0===q.length,onClick:e=>{e.preventDefault(),F()},children:y("i",{className:"bi bi-send-fill"})})]})]})}const me=h(Q)`
|
|
509
509
|
width: calc((100% - .75rem) / 2);
|
|
510
|
-
`,
|
|
510
|
+
`,he=h.div`
|
|
511
511
|
display: flex;
|
|
512
512
|
flex-wrap: wrap;
|
|
513
513
|
padding: .75rem;
|
|
514
514
|
gap: .75rem;
|
|
515
515
|
border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
|
|
516
|
-
`,
|
|
516
|
+
`,pe=h.button`
|
|
517
517
|
color: var(--bs-secondary);
|
|
518
518
|
cursor: pointer;
|
|
519
519
|
display: flex;
|
|
520
520
|
align-items: center;
|
|
521
521
|
justify-content: center;
|
|
522
|
-
width:
|
|
523
|
-
height:
|
|
522
|
+
width: 1.8rem;
|
|
523
|
+
height: 1.8rem;
|
|
524
524
|
border-radius: .5rem;
|
|
525
525
|
outline: none;
|
|
526
526
|
border: none;
|
|
527
527
|
background: transparent;
|
|
528
|
-
font-size: 1.
|
|
529
|
-
|
|
530
|
-
svg {
|
|
531
|
-
width: 1.25rem;
|
|
532
|
-
height: 1.25rem;
|
|
533
|
-
}
|
|
528
|
+
font-size: 1.1rem;
|
|
534
529
|
|
|
535
530
|
&:disabled {
|
|
536
|
-
color: var(--bs-gray-400);
|
|
531
|
+
color: var(--bs-gray-400) !important;
|
|
537
532
|
}
|
|
538
533
|
|
|
539
534
|
&:hover&:not(:disabled) {
|
|
540
535
|
background-color: var(--bs-gray-200);
|
|
541
536
|
}
|
|
542
537
|
|
|
543
|
-
`,
|
|
538
|
+
`,ue=h.div`
|
|
544
539
|
display: flex;
|
|
545
540
|
padding: .5rem .5rem .5rem 1rem;
|
|
546
541
|
gap: .25rem;
|
|
542
|
+
align-items: end;
|
|
547
543
|
|
|
548
544
|
textarea {
|
|
549
545
|
border: none;
|
|
@@ -556,21 +552,21 @@ import*as e from"react";import{useCallback as t,useState as r,useEffect as o,use
|
|
|
556
552
|
color: rgba(54, 54, 54, .3);
|
|
557
553
|
}
|
|
558
554
|
}
|
|
559
|
-
`,
|
|
555
|
+
`,ge=h.div`
|
|
560
556
|
background: #FFF;
|
|
561
557
|
margin: 0 1rem 1rem;
|
|
562
|
-
border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
|
|
558
|
+
border: var(--bs-border-width) var(--bs-border-style) ${e=>e.$focused?"var(--bs-primary)":"var(--bs-border-color)"};
|
|
563
559
|
border-radius: var(--bs-border-radius-lg);
|
|
564
560
|
box-shadow: 0.125rem 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
|
|
565
|
-
`;function
|
|
561
|
+
`;function fe(e){let{className:n,bot:i,user:a,input:l,showProcess:c,...d}=e;const[h,p]=t(d.messages||[]),u=s(null),g=r((()=>{const e=u.current;e&&requestAnimationFrame((()=>e.scrollTo(0,e.scrollHeight)))}),[]);return o((()=>{g()})),y(ve,{className:n,children:k(m,{children:[y(be,{ref:u,children:h.map(((e,r)=>y(re,{message:e,showProcess:c,bot:i,user:a},r)))}),l&&y(de,{onMessages:p,scrollRef:u,...l})]})})}const be=h.div`
|
|
566
562
|
display: flex;
|
|
567
563
|
flex-direction: column;
|
|
568
564
|
flex: 1;
|
|
569
565
|
overflow-y: auto;
|
|
570
566
|
padding: 0 1rem;
|
|
571
567
|
margin-bottom: 1rem;
|
|
572
|
-
`,
|
|
568
|
+
`,ve=h.div`
|
|
573
569
|
display: flex;
|
|
574
570
|
flex-direction: column;
|
|
575
571
|
height: 100%;
|
|
576
|
-
`;export{
|
|
572
|
+
`;export{fe as MessageBox,R as useChat};
|
package/package.json
CHANGED
|
@@ -1,59 +1,59 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@topthink/chat",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"scripts": {
|
|
5
|
-
"prebuild": "rimraf es types",
|
|
6
|
-
"build": "rollup -c --environment NODE_ENV:production",
|
|
7
|
-
"build:dev": "rollup -c",
|
|
8
|
-
"watch": "rollup -c -w",
|
|
9
|
-
"prepack": "npm run build"
|
|
10
|
-
},
|
|
11
|
-
"module": "es/index.js",
|
|
12
|
-
"types": "types/index.d.ts",
|
|
13
|
-
"files": [
|
|
14
|
-
"es",
|
|
15
|
-
"types",
|
|
16
|
-
"scss"
|
|
17
|
-
],
|
|
18
|
-
"dependencies": {
|
|
19
|
-
"@babel/runtime": "^7.11.2",
|
|
20
|
-
"@topthink/components": "^1.0.
|
|
21
|
-
"katex": "^0.16.9",
|
|
22
|
-
"react-markdown": "^8.0.7",
|
|
23
|
-
"react-textarea-autosize": "^8.5.3",
|
|
24
|
-
"rehype-highlight": "^6.0.0",
|
|
25
|
-
"rehype-katex": "^6.0.2",
|
|
26
|
-
"remark-breaks": "^3.0.2",
|
|
27
|
-
"remark-gfm": "^3.0.1",
|
|
28
|
-
"remark-math": "^5.1.1"
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
"
|
|
33
|
-
"react": "^
|
|
34
|
-
"react-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
"@babel/
|
|
39
|
-
"@babel/
|
|
40
|
-
"@
|
|
41
|
-
"@rollup/plugin-
|
|
42
|
-
"@rollup/plugin-
|
|
43
|
-
"@rollup/plugin-
|
|
44
|
-
"@rollup/plugin-
|
|
45
|
-
"@rollup/plugin-
|
|
46
|
-
"@rollup/plugin-
|
|
47
|
-
"@rollup
|
|
48
|
-
"@
|
|
49
|
-
"@types/
|
|
50
|
-
"@types/
|
|
51
|
-
"@types/react": "^17.0.0",
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@topthink/chat",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"scripts": {
|
|
5
|
+
"prebuild": "rimraf es types",
|
|
6
|
+
"build": "rollup -c --environment NODE_ENV:production",
|
|
7
|
+
"build:dev": "rollup -c",
|
|
8
|
+
"watch": "rollup -c -w",
|
|
9
|
+
"prepack": "npm run build"
|
|
10
|
+
},
|
|
11
|
+
"module": "es/index.js",
|
|
12
|
+
"types": "types/index.d.ts",
|
|
13
|
+
"files": [
|
|
14
|
+
"es",
|
|
15
|
+
"types",
|
|
16
|
+
"scss"
|
|
17
|
+
],
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"@babel/runtime": "^7.11.2",
|
|
20
|
+
"@topthink/components": "^1.0.78",
|
|
21
|
+
"katex": "^0.16.9",
|
|
22
|
+
"react-markdown": "^8.0.7",
|
|
23
|
+
"react-textarea-autosize": "^8.5.3",
|
|
24
|
+
"rehype-highlight": "^6.0.0",
|
|
25
|
+
"rehype-katex": "^6.0.2",
|
|
26
|
+
"remark-breaks": "^3.0.2",
|
|
27
|
+
"remark-gfm": "^3.0.1",
|
|
28
|
+
"remark-math": "^5.1.1"
|
|
29
|
+
},
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"lodash": "*",
|
|
32
|
+
"react": "^17||^18",
|
|
33
|
+
"react-bootstrap": "^2.1.2",
|
|
34
|
+
"react-dom": "^17||^18"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"@babel/core": "^7.23.6",
|
|
38
|
+
"@babel/plugin-transform-runtime": "^7.23.6",
|
|
39
|
+
"@babel/preset-env": "^7.23.6",
|
|
40
|
+
"@rollup/plugin-babel": "^6.0.4",
|
|
41
|
+
"@rollup/plugin-commonjs": "^25.0.7",
|
|
42
|
+
"@rollup/plugin-dynamic-import-vars": "^2.1.2",
|
|
43
|
+
"@rollup/plugin-image": "^3.0.3",
|
|
44
|
+
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
45
|
+
"@rollup/plugin-terser": "^0.4.4",
|
|
46
|
+
"@rollup/plugin-typescript": "^11.1.5",
|
|
47
|
+
"@svgr/rollup": "^8.1.0",
|
|
48
|
+
"@types/lodash": "^4.14.161",
|
|
49
|
+
"@types/node": "^18.11.18",
|
|
50
|
+
"@types/react": "^17.0.0",
|
|
51
|
+
"@types/react-dom": "^17.0.0",
|
|
52
|
+
"react-bootstrap": "^2.1.2",
|
|
53
|
+
"rollup": "^4.8.0",
|
|
54
|
+
"typescript": "^5.3.3"
|
|
55
|
+
},
|
|
56
|
+
"author": "yunwuxin <tzzhangyajun@qq.com> (https://github.com/yunwuxin)",
|
|
57
|
+
"license": "MIT",
|
|
58
|
+
"gitHead": "708024d254652c45a434c4a6b18971b44483a841"
|
|
59
|
+
}
|
|
@@ -3,11 +3,21 @@ import { Message, ShowProcess } from '../../types';
|
|
|
3
3
|
import { ChatOptions } from '../../hooks/use-chat';
|
|
4
4
|
interface Props {
|
|
5
5
|
className?: string;
|
|
6
|
-
|
|
6
|
+
bot: {
|
|
7
|
+
name: string;
|
|
8
|
+
avatar: string;
|
|
9
|
+
};
|
|
10
|
+
user?: {
|
|
11
|
+
name: string;
|
|
12
|
+
avatar: string;
|
|
13
|
+
};
|
|
7
14
|
messages?: Message[];
|
|
8
15
|
showProcess?: ShowProcess;
|
|
9
|
-
|
|
10
|
-
|
|
16
|
+
input?: {
|
|
17
|
+
fileTypes?: string[];
|
|
18
|
+
minRows?: number;
|
|
19
|
+
chat: ChatOptions;
|
|
20
|
+
};
|
|
11
21
|
}
|
|
12
|
-
export default function MessageBox({ className,
|
|
22
|
+
export default function MessageBox({ className, bot, user, input, showProcess, ...props }: Props): JSX.Element;
|
|
13
23
|
export {};
|
|
@@ -4,8 +4,9 @@ import { ChatOptions } from '../../hooks/use-chat';
|
|
|
4
4
|
interface Props {
|
|
5
5
|
chat: ChatOptions;
|
|
6
6
|
fileTypes?: string[];
|
|
7
|
+
minRows?: number;
|
|
7
8
|
scrollRef: MutableRefObject<HTMLDivElement | null>;
|
|
8
9
|
onMessages: (messages: Message[]) => void;
|
|
9
10
|
}
|
|
10
|
-
export default function ({ chat, fileTypes, scrollRef, onMessages }: Props): JSX.Element;
|
|
11
|
+
export default function ({ chat, fileTypes, scrollRef, onMessages, minRows }: Props): JSX.Element;
|
|
11
12
|
export {};
|
|
@@ -2,8 +2,15 @@
|
|
|
2
2
|
import { Message, ShowProcess } from '../../types';
|
|
3
3
|
interface Props {
|
|
4
4
|
message: Message;
|
|
5
|
-
|
|
5
|
+
bot: {
|
|
6
|
+
name: string;
|
|
7
|
+
avatar: string;
|
|
8
|
+
};
|
|
9
|
+
user?: {
|
|
10
|
+
name: string;
|
|
11
|
+
avatar: string;
|
|
12
|
+
};
|
|
6
13
|
showProcess?: ShowProcess;
|
|
7
14
|
}
|
|
8
|
-
declare const MessageItem: import("react").MemoExoticComponent<({
|
|
15
|
+
declare const MessageItem: import("react").MemoExoticComponent<({ bot, user, message, showProcess }: Props) => JSX.Element>;
|
|
9
16
|
export default MessageItem;
|
|
@@ -9,8 +9,10 @@ export interface ChatOptions {
|
|
|
9
9
|
prologue: string;
|
|
10
10
|
questions: string[];
|
|
11
11
|
};
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
conversation?: {
|
|
13
|
+
id: string;
|
|
14
|
+
messages: Message[];
|
|
15
|
+
};
|
|
14
16
|
ref?: MutableRefObject<Chat | null>;
|
|
15
17
|
}
|
|
16
18
|
export default function useChat({ url, transformRequest, onboarding, onSuccess, ref, ...props }: ChatOptions): {
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { Dispatch, ReactNode, SetStateAction } from 'react';
|
|
2
|
-
import 'yet-another-react-lightbox/styles.css';
|
|
3
|
-
import 'yet-another-react-lightbox/plugins/counter.css';
|
|
4
|
-
interface ImageContextType {
|
|
5
|
-
images: Map<number, string>;
|
|
6
|
-
current: number | undefined;
|
|
7
|
-
setCurrent: Dispatch<SetStateAction<number | undefined>>;
|
|
8
|
-
setShow: Dispatch<SetStateAction<boolean>>;
|
|
9
|
-
registerImage: (id: number, url: string) => () => void;
|
|
10
|
-
}
|
|
11
|
-
export declare const ImageContext: import("react").Context<ImageContextType>;
|
|
12
|
-
interface Props {
|
|
13
|
-
children: ReactNode;
|
|
14
|
-
}
|
|
15
|
-
export default function Lightbox({ children }: Props): JSX.Element;
|
|
16
|
-
export {};
|