ai-chat-vue3 0.1.1 → 0.1.2

package/dist/ai-vue3-lib.es.js

@@ -1377,10 +1377,10 @@ const It = (r, e) => {
       ])
     ]));
   }
-}), Ht = /* @__PURE__ */ It(jt, [["__scopeId", "data-v-5c7d2627"]]), Gt = [Ht], Xt = {
+}), Ht = /* @__PURE__ */ It(jt, [["__scopeId", "data-v-b0f41f88"]]), Gt = [Ht], Xt = {
   install(r) {
     Gt.forEach((e) => {
-      r.component(e.name, e);
+      console.log(e.name), r.component(e.name, e);
     });
   }
 };

package/dist/ai-vue3-lib.umd.js

@@ -57,4 +57,4 @@ ${r}</tr>
 `}tablecell(r){let e=this.parser.parseInline(r.tokens),t=r.header?"th":"td";return(r.align?`<${t} align="${r.align}">`:`<${t}>`)+e+`</${t}>
 `}strong({tokens:r}){return`<strong>${this.parser.parseInline(r)}</strong>`}em({tokens:r}){return`<em>${this.parser.parseInline(r)}</em>`}codespan({text:r}){return`<code>${v(r,!0)}</code>`}br(r){return"<br>"}del({tokens:r}){return`<del>${this.parser.parseInline(r)}</del>`}link({href:r,title:e,tokens:t}){let s=this.parser.parseInline(t),n=Te(r);if(n===null)return s;r=n;let i='<a href="'+r+'"';return e&&(i+=' title="'+v(e)+'"'),i+=">"+s+"</a>",i}image({href:r,title:e,text:t,tokens:s}){s&&(t=this.parser.parseInline(s,this.parser.textRenderer));let n=Te(r);if(n===null)return v(t);r=n;let i=`<img src="${r}" alt="${t}"`;return e&&(i+=` title="${v(e)}"`),i+=">",i}text(r){return"tokens"in r&&r.tokens?this.parser.parseInline(r.tokens):"escaped"in r&&r.escaped?r.text:v(r.text)}},ae=class{strong({text:r}){return r}em({text:r}){return r}codespan({text:r}){return r}del({text:r}){return r}html({text:r}){return r}text({text:r}){return r}link({text:r}){return""+r}image({text:r}){return""+r}br(){return""}checkbox({raw:r}){return r}},_=class he{constructor(e){m(this,"options");m(this,"renderer");m(this,"textRenderer");this.options=e||B,this.options.renderer=this.options.renderer||new X,this.renderer=this.options.renderer,this.renderer.options=this.options,this.renderer.parser=this,this.textRenderer=new ae}static parse(e,t){return new he(t).parse(e)}static parseInline(e,t){return new he(t).parseInline(e)}parse(e){var s,n;let t="";for(let i=0;i<e.length;i++){let a=e[i];if((n=(s=this.options.extensions)==null?void 0:s.renderers)!=null&&n[a.type]){let h=a,o=this.options.extensions.renderers[h.type].call({parser:this},h);if(o!==!1||!["space","hr","heading","code","table","blockquote","list","html","def","paragraph","text"].includes(h.type)){t+=o||"";continue}}let l=a;switch(l.type){case"space":{t+=this.renderer.space(l);break}case"hr":{t+=this.renderer.hr(l);break}case"heading":{t+=this.renderer.heading(l);break}case"code":{t+=this.renderer.code(l);break}case"table":{t+=this.renderer.table(l);break}case"blockquote":{t+=this.renderer.blockquote(l);break}case"list":{t+=this.renderer.list(l);break}case"checkbox":{t+=this.renderer.checkbox(l);break}case"html":{t+=this.renderer.html(l);break}case"def":{t+=this.renderer.def(l);break}case"paragraph":{t+=this.renderer.paragraph(l);break}case"text":{t+=this.renderer.text(l);break}default:{let h='Token with "'+l.type+'" type was not found.';if(this.options.silent)return console.error(h),"";throw new Error(h)}}}return t}parseInline(e,t=this.renderer){var n,i;let s="";for(let a=0;a<e.length;a++){let l=e[a];if((i=(n=this.options.extensions)==null?void 0:n.renderers)!=null&&i[l.type]){let o=this.options.extensions.renderers[l.type].call({parser:this},l);if(o!==!1||!["escape","html","link","image","strong","em","codespan","br","del","text"].includes(l.type)){s+=o||"";continue}}let h=l;switch(h.type){case"escape":{s+=t.text(h);break}case"html":{s+=t.html(h);break}case"link":{s+=t.link(h);break}case"image":{s+=t.image(h);break}case"checkbox":{s+=t.checkbox(h);break}case"strong":{s+=t.strong(h);break}case"em":{s+=t.em(h);break}case"codespan":{s+=t.codespan(h);break}case"br":{s+=t.br(h);break}case"del":{s+=t.del(h);break}case"text":{s+=t.text(h);break}default:{let o='Token with "'+h.type+'" type was not found.';if(this.options.silent)return console.error(o),"";throw new Error(o)}}}return s}},D=(W=class{constructor(r){m(this,"options");m(this,"block");this.options=r||B}preprocess(r){return r}postprocess(r){return r}processAllTokens(r){return r}emStrongMask(r){return r}provideLexer(){return this.block?T.lex:T.lexInline}provideParser(){return this.block?_.parse:_.parseInline}},m(W,"passThroughHooks",new Set(["preprocess","postprocess","processAllTokens","emStrongMask"])),m(W,"passThroughHooksRespectAsync",new Set(["preprocess","postprocess","processAllTokens"])),W),ut=class{constructor(...r){m(this,"defaults",A());m(this,"options",this.setOptions);m(this,"parse",this.parseMarkdown(!0));m(this,"parseInline",this.parseMarkdown(!1));m(this,"Parser",_);m(this,"Renderer",X);m(this,"TextRenderer",ae);m(this,"Lexer",T);m(this,"Tokenizer",U);m(this,"Hooks",D);this.use(...r)}walkTokens(r,e){var s,n;let t=[];for(let i of r)switch(t=t.concat(e.call(this,i)),i.type){case"table":{let a=i;for(let l of a.header)t=t.concat(this.walkTokens(l.tokens,e));for(let l of a.rows)for(let h of l)t=t.concat(this.walkTokens(h.tokens,e));break}case"list":{let a=i;t=t.concat(this.walkTokens(a.items,e));break}default:{let a=i;(n=(s=this.defaults.extensions)==null?void 0:s.childTokens)!=null&&n[a.type]?this.defaults.extensions.childTokens[a.type].forEach(l=>{let h=a[l].flat(1/0);t=t.concat(this.walkTokens(h,e))}):a.tokens&&(t=t.concat(this.walkTokens(a.tokens,e)))}}return t}use(...r){let e=this.defaults.extensions||{renderers:{},childTokens:{}};return r.forEach(t=>{let s={...t};if(s.async=this.defaults.async||s.async||!1,t.extensions&&(t.extensions.forEach(n=>{if(!n.name)throw new Error("extension name required");if("renderer"in n){let i=e.renderers[n.name];i?e.renderers[n.name]=function(...a){let l=n.renderer.apply(this,a);return l===!1&&(l=i.apply(this,a)),l}:e.renderers[n.name]=n.renderer}if("tokenizer"in n){if(!n.level||n.level!=="block"&&n.level!=="inline")throw new Error("extension level must be 'block' or 'inline'");let i=e[n.level];i?i.unshift(n.tokenizer):e[n.level]=[n.tokenizer],n.start&&(n.level==="block"?e.startBlock?e.startBlock.push(n.start):e.startBlock=[n.start]:n.level==="inline"&&(e.startInline?e.startInline.push(n.start):e.startInline=[n.start]))}"childTokens"in n&&n.childTokens&&(e.childTokens[n.name]=n.childTokens)}),s.extensions=e),t.renderer){let n=this.defaults.renderer||new X(this.defaults);for(let i in t.renderer){if(!(i in n))throw new Error(`renderer '${i}' does not exist`);if(["options","parser"].includes(i))continue;let a=i,l=t.renderer[a],h=n[a];n[a]=(...o)=>{let p=l.apply(n,o);return p===!1&&(p=h.apply(n,o)),p||""}}s.renderer=n}if(t.tokenizer){let n=this.defaults.tokenizer||new U(this.defaults);for(let i in t.tokenizer){if(!(i in n))throw new Error(`tokenizer '${i}' does not exist`);if(["options","rules","lexer"].includes(i))continue;let a=i,l=t.tokenizer[a],h=n[a];n[a]=(...o)=>{let p=l.apply(n,o);return p===!1&&(p=h.apply(n,o)),p}}s.tokenizer=n}if(t.hooks){let n=this.defaults.hooks||new D;for(let i in t.hooks){if(!(i in n))throw new Error(`hook '${i}' does not exist`);if(["options","block"].includes(i))continue;let a=i,l=t.hooks[a],h=n[a];D.passThroughHooks.has(i)?n[a]=o=>{if(this.defaults.async&&D.passThroughHooksRespectAsync.has(i))return(async()=>{let k=await l.call(n,o);return h.call(n,k)})();let p=l.call(n,o);return h.call(n,p)}:n[a]=(...o)=>{if(this.defaults.async)return(async()=>{let k=await l.apply(n,o);return k===!1&&(k=await h.apply(n,o)),k})();let p=l.apply(n,o);return p===!1&&(p=h.apply(n,o)),p}}s.hooks=n}if(t.walkTokens){let n=this.defaults.walkTokens,i=t.walkTokens;s.walkTokens=function(a){let l=[];return l.push(i.call(this,a)),n&&(l=l.concat(n.call(this,a))),l}}this.defaults={...this.defaults,...s}}),this}setOptions(r){return this.defaults={...this.defaults,...r},this}lexer(r,e){return T.lex(r,e??this.defaults)}parser(r,e){return _.parse(r,e??this.defaults)}parseMarkdown(r){return(e,t)=>{let s={...t},n={...this.defaults,...s},i=this.onError(!!n.silent,!!n.async);if(this.defaults.async===!0&&s.async===!1)return i(new Error("marked(): The async option was set to true by an extension. Remove async: false from the parse options object to return a Promise."));if(typeof e>"u"||e===null)return i(new Error("marked(): input parameter is undefined or null"));if(typeof e!="string")return i(new Error("marked(): input parameter is of type "+Object.prototype.toString.call(e)+", string expected"));if(n.hooks&&(n.hooks.options=n,n.hooks.block=r),n.async)return(async()=>{let a=n.hooks?await n.hooks.preprocess(e):e,l=await(n.hooks?await n.hooks.provideLexer():r?T.lex:T.lexInline)(a,n),h=n.hooks?await n.hooks.processAllTokens(l):l;n.walkTokens&&await Promise.all(this.walkTokens(h,n.walkTokens));let o=await(n.hooks?await n.hooks.provideParser():r?_.parse:_.parseInline)(h,n);return n.hooks?await n.hooks.postprocess(o):o})().catch(i);try{n.hooks&&(e=n.hooks.preprocess(e));let a=(n.hooks?n.hooks.provideLexer():r?T.lex:T.lexInline)(e,n);n.hooks&&(a=n.hooks.processAllTokens(a)),n.walkTokens&&this.walkTokens(a,n.walkTokens);let l=(n.hooks?n.hooks.provideParser():r?_.parse:_.parseInline)(a,n);return n.hooks&&(l=n.hooks.postprocess(l)),l}catch(a){return i(a)}}}onError(r,e){return t=>{if(t.message+=`
 Please report this to https://github.com/markedjs/marked.`,r){let s="<p>An error occurred:</p><pre>"+v(t.message+"",!0)+"</pre>";return e?Promise.resolve(s):s}if(e)return Promise.reject(t);throw t}}},C=new ut;function b(r,e){return C.parse(r,e)}b.options=b.setOptions=function(r){return C.setOptions(r),b.defaults=C.defaults,pe(b.defaults),b},b.getDefaults=A,b.defaults=B,b.use=function(...r){return C.use(...r),b.defaults=C.defaults,pe(b.defaults),b},b.walkTokens=function(r,e){return C.walkTokens(r,e)},b.parseInline=C.parseInline,b.Parser=_,b.parser=_.parse,b.Renderer=X,b.TextRenderer=ae,b.Lexer=T,b.lexer=T.lex,b.Tokenizer=U,b.Hooks=D,b.parse=b,b.options,b.setOptions,b.use,b.walkTokens,b.parseInline,_.parse,T.lex;const Bt="",gt=(r,e)=>{const t=r.__vccOpts||r;for(const[s,n]of e)t[s]=n;return t},kt={class:"chat-container"},dt={class:"bubble"},ft=["innerHTML"],bt={class:"bubble"},xt={key:0,class:"loading"},mt={class:"toolbar"},wt={class:"input"},yt=["disabled","onKeydown"],St=["disabled"],$t="向大模型提问，例：帮我起一个智能助手的名字。",Ae=gt(Object.assign({name:"chatPanel"},{__name:"ChatPanel",setup(r){const e=g.ref(""),t=g.ref([]),s=g.ref(!1),n=g.ref(null),i=g.ref("glm-4.6v-flash"),a={"mimo-v2-flash":{model:"mimo-v2-flash",name:"Mimo V2 Flash",apiKey:"sk-cna17w0o4spxrtgp1ieaaq77u38vifffe3dpjbw1z9alrnif",apiUrl:"https://api.xiaomimimo.com/v1/chat/completions"},"doubao-seed-1-8-251215":{model:"doubao-seed-1-8-251215",name:"Doubao Seed 1.8 251215",apiKey:"e54eb32a-75ba-4190-8a4f-fc05d5d857cb",apiUrl:"https://ark.cn-beijing.volces.com/api/v3/chat/completions"},"glm-4.6v-flash":{model:"glm-4.6v-flash",name:"GLM 4.6v Flash",apiKey:"9f29ea7cbab7437bb3161d9c2adf490f.mPv5XskGyi0SqaMl",apiUrl:"https://open.bigmodel.cn/api/paas/v4/chat/completions"}},l=k=>{try{return b(k||"")}catch(u){return console.error("Markdown解析失败:",u),k||""}},h=()=>{g.nextTick(()=>{const k=n.value;if(k){const u=document.createElement("div");k.appendChild(u),u.scrollIntoView({behavior:"smooth",block:"center"}),k.removeChild(u)}})};g.watch(t,h,{deep:!0,immediate:!0});const o=async k=>{var u,c,x,d,w,z,I,j,Q;s.value=!0;try{let E={"Content-Type":"application/json"};const q=a[i.value].apiKey;i.value==="glm-4.6v-flash"||i.value==="doubao-seed-1-8-251215"?E.Authorization=`Bearer ${q}`:E["api-key"]=q;const R=await fetch(a[i.value].apiUrl,{method:"POST",headers:E,body:JSON.stringify({model:a[i.value].model,messages:k,stream:!0})});if(!R.ok)throw new Error(`LLM 接口响应异常: ${R.status}`);if(R.body&&typeof R.body.getReader=="function"){const $=t.value.length;t.value.push({role:"system",content:""});const oe=new TextDecoder,_t=R.body.getReader();let V="";for(;;){const{done:zt,value:At}=await _t.read();if(zt)break;const vt=oe.decode(At,{stream:!0}).split(`
-`);for(const Et of vt){const J=Et.trim();if(J.startsWith("data:")){const P=J.substring(5).trim();if(P==="[DONE]")break;try{const L=JSON.parse(P),ve=((x=(c=(u=L==null?void 0:L.choices)==null?void 0:u[0])==null?void 0:c.delta)==null?void 0:x.content)||"";ve&&(V+=ve,t.value[$].content=V,h())}catch(L){console.error("解析流式数据失败:",L)}}else if(J)try{const P=JSON.parse(J),L=((z=(w=(d=P==null?void 0:P.choices)==null?void 0:d[0])==null?void 0:w.delta)==null?void 0:z.content)||"";L&&(V+=L,t.value[$].content=V,h())}catch(P){console.error("解析非SSE流式数据失败:",P)}}}V||(t.value[$].content="（流式响应未返回有效内容）")}else{const $=await R.json(),oe=((Q=(j=(I=$==null?void 0:$.choices)==null?void 0:I[0])==null?void 0:j.message)==null?void 0:Q.content)||($==null?void 0:$.reply)||($==null?void 0:$.message)||"（接口未返回有效内容）";t.value.push({role:"system",content:oe})}}catch(E){t.value.push({role:"system",content:`调用模型失败：${E.message||E}`})}finally{s.value=!1}},p=async()=>{if(!e.value.trim()||s.value)return;const k=e.value.trim();t.value.push({role:"user",content:k}),e.value="",await o(t.value)};return(k,u)=>(g.openBlock(),g.createElementBlock("section",kt,[g.createElementVNode("div",{class:"messages",ref_key:"messageList",ref:n},[(g.openBlock(!0),g.createElementBlock(g.Fragment,null,g.renderList(t.value,(c,x)=>(g.openBlock(),g.createElementBlock("div",{key:x,class:g.normalizeClass(["message",c.role==="user"?"user-message":"system-message"])},[c.role==="system"?(g.openBlock(),g.createElementBlock(g.Fragment,{key:0},[g.createElementVNode("div",{class:g.normalizeClass(["avatar","system"])},"AI"),g.createElementVNode("div",dt,[g.createElementVNode("div",{innerHTML:l(c.content)},null,8,ft)])],64)):(g.openBlock(),g.createElementBlock(g.Fragment,{key:1},[g.createElementVNode("div",bt,g.toDisplayString(c.content),1),g.createElementVNode("div",{class:g.normalizeClass(["avatar","user"])},"我")],64))],2))),128)),s.value?(g.openBlock(),g.createElementBlock("div",xt,"AI 正在思考...")):g.createCommentVNode("",!0)],512),g.createElementVNode("div",mt,[g.createElementVNode("div",wt,[g.withDirectives(g.createElementVNode("textarea",{"onUpdate:modelValue":u[0]||(u[0]=c=>e.value=c),class:"prompt-input",placeholder:$t,disabled:s.value,onKeydown:g.withKeys(g.withModifiers(p,["exact","prevent"]),["enter"])},null,40,yt),[[g.vModelText,e.value]]),g.createElementVNode("button",{class:"send-btn",disabled:s.value||!e.value.trim(),onClick:p},g.toDisplayString(s.value?"等待中…":"发送"),9,St)])])]))}}),[["__scopeId","data-v-5c7d2627"]]),Rt=[Ae],Tt={install(r){Rt.forEach(e=>{r.component(e.name,e)})}};S.ChatPanel=Ae,S.default=Tt,Object.defineProperties(S,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+`);for(const Et of vt){const J=Et.trim();if(J.startsWith("data:")){const P=J.substring(5).trim();if(P==="[DONE]")break;try{const L=JSON.parse(P),ve=((x=(c=(u=L==null?void 0:L.choices)==null?void 0:u[0])==null?void 0:c.delta)==null?void 0:x.content)||"";ve&&(V+=ve,t.value[$].content=V,h())}catch(L){console.error("解析流式数据失败:",L)}}else if(J)try{const P=JSON.parse(J),L=((z=(w=(d=P==null?void 0:P.choices)==null?void 0:d[0])==null?void 0:w.delta)==null?void 0:z.content)||"";L&&(V+=L,t.value[$].content=V,h())}catch(P){console.error("解析非SSE流式数据失败:",P)}}}V||(t.value[$].content="（流式响应未返回有效内容）")}else{const $=await R.json(),oe=((Q=(j=(I=$==null?void 0:$.choices)==null?void 0:I[0])==null?void 0:j.message)==null?void 0:Q.content)||($==null?void 0:$.reply)||($==null?void 0:$.message)||"（接口未返回有效内容）";t.value.push({role:"system",content:oe})}}catch(E){t.value.push({role:"system",content:`调用模型失败：${E.message||E}`})}finally{s.value=!1}},p=async()=>{if(!e.value.trim()||s.value)return;const k=e.value.trim();t.value.push({role:"user",content:k}),e.value="",await o(t.value)};return(k,u)=>(g.openBlock(),g.createElementBlock("section",kt,[g.createElementVNode("div",{class:"messages",ref_key:"messageList",ref:n},[(g.openBlock(!0),g.createElementBlock(g.Fragment,null,g.renderList(t.value,(c,x)=>(g.openBlock(),g.createElementBlock("div",{key:x,class:g.normalizeClass(["message",c.role==="user"?"user-message":"system-message"])},[c.role==="system"?(g.openBlock(),g.createElementBlock(g.Fragment,{key:0},[g.createElementVNode("div",{class:g.normalizeClass(["avatar","system"])},"AI"),g.createElementVNode("div",dt,[g.createElementVNode("div",{innerHTML:l(c.content)},null,8,ft)])],64)):(g.openBlock(),g.createElementBlock(g.Fragment,{key:1},[g.createElementVNode("div",bt,g.toDisplayString(c.content),1),g.createElementVNode("div",{class:g.normalizeClass(["avatar","user"])},"我")],64))],2))),128)),s.value?(g.openBlock(),g.createElementBlock("div",xt,"AI 正在思考...")):g.createCommentVNode("",!0)],512),g.createElementVNode("div",mt,[g.createElementVNode("div",wt,[g.withDirectives(g.createElementVNode("textarea",{"onUpdate:modelValue":u[0]||(u[0]=c=>e.value=c),class:"prompt-input",placeholder:$t,disabled:s.value,onKeydown:g.withKeys(g.withModifiers(p,["exact","prevent"]),["enter"])},null,40,yt),[[g.vModelText,e.value]]),g.createElementVNode("button",{class:"send-btn",disabled:s.value||!e.value.trim(),onClick:p},g.toDisplayString(s.value?"等待中…":"发送"),9,St)])])]))}}),[["__scopeId","data-v-b0f41f88"]]),Rt=[Ae],Tt={install(r){Rt.forEach(e=>{console.log(e.name),r.component(e.name,e)})}};S.ChatPanel=Ae,S.default=Tt,Object.defineProperties(S,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";[data-v-5c7d2627] h1,[data-v-5c7d2627] h2,[data-v-5c7d2627] h3,[data-v-5c7d2627] h4,[data-v-5c7d2627] h5,[data-v-5c7d2627] h6{color:#d0e0ff;margin:20px 0 8px;font-weight:600}[data-v-5c7d2627] p{margin:8px 0}[data-v-5c7d2627] code{background:rgba(255,255,255,.1);padding:4px 8px;border-radius:4px;font-family:Consolas,Monaco,monospace}[data-v-5c7d2627] pre{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;overflow-x:auto;margin:8px 0}[data-v-5c7d2627] pre code{background:transparent;padding:0}[data-v-5c7d2627] blockquote{border-left:3px solid rgba(92,161,255,.5);margin:8px 0;padding:0 20px;color:#b0c8f8}[data-v-5c7d2627] ul,[data-v-5c7d2627] ol{margin:8px 0;padding-left:24px}[data-v-5c7d2627] li{margin:4px 0}[data-v-5c7d2627] a{color:#5ca1ff;text-decoration:none}[data-v-5c7d2627] a:hover{text-decoration:underline}.chat-container[data-v-5c7d2627]{display:grid;grid-template-rows:1fr auto;gap:12px;padding:20px}.chat-container .messages[data-v-5c7d2627]{overflow-y:auto;padding-right:6px}.chat-container .messages .message[data-v-5c7d2627]{display:grid;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04)}.chat-container .messages .message.system-message[data-v-5c7d2627]{grid-template-columns:60px 1fr}.chat-container .messages .message.user-message[data-v-5c7d2627]{grid-template-columns:1fr 60px;justify-items:end}.chat-container .messages .message.user-message .bubble[data-v-5c7d2627]{text-align:right;max-width:906px}.chat-container .messages .message .avatar[data-v-5c7d2627]{height:44px;width:44px;display:grid;place-items:center;border-radius:12px;font-weight:700}.chat-container .messages .message .avatar.user[data-v-5c7d2627]{background:linear-gradient(135deg,#3557ff,#4db8ff);color:#fff}.chat-container .messages .message .avatar.system[data-v-5c7d2627]{background:linear-gradient(135deg,#4ac29a,#2c9b7d);color:#0c221a}.chat-container .messages .message .bubble[data-v-5c7d2627]{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 16px;color:#e9f0ff;white-space:pre-wrap;max-width:906px;box-sizing:border-box}.chat-container .messages .loading[data-v-5c7d2627]{color:#8fb1ff;font-size:14px;display:flex;align-items:center;gap:8px}.chat-container .messages .loading[data-v-5c7d2627]:after{content:"";width:10px;height:10px;border-radius:50%;border:2px solid rgba(143,177,255,.35);border-top-color:#8fb1ff;animation:spin 1s linear infinite}.toolbar[data-v-5c7d2627]{padding:8px;position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;min-width:600px;height:88px;background:#0b1220}.toolbar .input[data-v-5c7d2627]{display:flex;gap:8px;align-items:stretch;width:1100px;margin:auto}.toolbar .input .prompt-input[data-v-5c7d2627]{width:100%;flex:1;resize:none;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);color:#e9f0ff;padding:12px;border-radius:12px;font-size:15px;outline:none;min-height:64px;transition:border-color .2s ease,box-shadow .2s ease}.toolbar .input .prompt-input[data-v-5c7d2627]:focus{border-color:#5ca1ff;box-shadow:0 0 0 2px #5ca1ff40}.toolbar .send-btn[data-v-5c7d2627]{min-width:110px;border:none;border-radius:12px;font-weight:700;color:#0b1220;background:linear-gradient(135deg,#5ca1ff,#52e5ff);cursor:pointer;transition:transform .15s ease,box-shadow .2s ease}.toolbar .send-btn[data-v-5c7d2627]:disabled{opacity:.5;cursor:not-allowed}.toolbar .send-btn[data-v-5c7d2627]:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 12px 30px #52e5ff4d}
+@charset "UTF-8";.chat-container[data-v-b0f41f88]:before{content:" ";position:fixed;z-index:-10;top:0;left:0;width:100%;height:100%;background-color:#0b1220;background-repeat:repeat-y}[data-v-b0f41f88] h1,[data-v-b0f41f88] h2,[data-v-b0f41f88] h3,[data-v-b0f41f88] h4,[data-v-b0f41f88] h5,[data-v-b0f41f88] h6{color:#d0e0ff;margin:20px 0 8px;font-weight:600}[data-v-b0f41f88] p{margin:8px 0}[data-v-b0f41f88] code{background:rgba(255,255,255,.1);padding:4px 8px;border-radius:4px;font-family:Consolas,Monaco,monospace}[data-v-b0f41f88] pre{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;overflow-x:auto;margin:8px 0}[data-v-b0f41f88] pre code{background:transparent;padding:0}[data-v-b0f41f88] blockquote{border-left:3px solid rgba(92,161,255,.5);margin:8px 0;padding:0 20px;color:#b0c8f8}[data-v-b0f41f88] ul,[data-v-b0f41f88] ol{margin:8px 0;padding-left:24px}[data-v-b0f41f88] li{margin:4px 0}[data-v-b0f41f88] a{color:#5ca1ff;text-decoration:none}[data-v-b0f41f88] a:hover{text-decoration:underline}.chat-container[data-v-b0f41f88]{display:grid;grid-template-rows:1fr auto;gap:12px;padding:20px}.chat-container .messages[data-v-b0f41f88]{overflow-y:auto;padding-right:6px}.chat-container .messages .message[data-v-b0f41f88]{display:grid;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04)}.chat-container .messages .message.system-message[data-v-b0f41f88]{grid-template-columns:60px 1fr}.chat-container .messages .message.user-message[data-v-b0f41f88]{grid-template-columns:1fr 60px;justify-items:end}.chat-container .messages .message.user-message .bubble[data-v-b0f41f88]{text-align:right;max-width:906px}.chat-container .messages .message .avatar[data-v-b0f41f88]{height:44px;width:44px;display:grid;place-items:center;border-radius:12px;font-weight:700}.chat-container .messages .message .avatar.user[data-v-b0f41f88]{background:linear-gradient(135deg,#3557ff,#4db8ff);color:#fff}.chat-container .messages .message .avatar.system[data-v-b0f41f88]{background:linear-gradient(135deg,#4ac29a,#2c9b7d);color:#0c221a}.chat-container .messages .message .bubble[data-v-b0f41f88]{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 16px;color:#e9f0ff;white-space:pre-wrap;max-width:906px;box-sizing:border-box}.chat-container .messages .loading[data-v-b0f41f88]{color:#8fb1ff;font-size:14px;display:flex;align-items:center;gap:8px}.chat-container .messages .loading[data-v-b0f41f88]:after{content:"";width:10px;height:10px;border-radius:50%;border:2px solid rgba(143,177,255,.35);border-top-color:#8fb1ff;animation:spin 1s linear infinite}.toolbar[data-v-b0f41f88]{padding:8px;position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;min-width:600px;height:88px;background:#0b1220}.toolbar .input[data-v-b0f41f88]{display:flex;gap:8px;align-items:stretch;width:1100px;margin:auto}.toolbar .input .prompt-input[data-v-b0f41f88]{width:100%;flex:1;resize:none;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);color:#e9f0ff;padding:12px;border-radius:12px;font-size:15px;outline:none;min-height:64px;transition:border-color .2s ease,box-shadow .2s ease}.toolbar .input .prompt-input[data-v-b0f41f88]:focus{border-color:#5ca1ff;box-shadow:0 0 0 2px #5ca1ff40}.toolbar .send-btn[data-v-b0f41f88]{min-width:110px;border:none;border-radius:12px;font-weight:700;color:#0b1220;background:linear-gradient(135deg,#5ca1ff,#52e5ff);cursor:pointer;transition:transform .15s ease,box-shadow .2s ease}.toolbar .send-btn[data-v-b0f41f88]:disabled{opacity:.5;cursor:not-allowed}.toolbar .send-btn[data-v-b0f41f88]:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 12px 30px #52e5ff4d}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-chat-vue3",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "基于Vue3的AI聊天应用",
   "type": "module",
   "main": "dist/ai-vue3-lib.umd.js",
@@ -14,7 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "ai-chat-vue3": "^0.1.0",
+    "ai-chat-vue3": "^0.1.1",
     "marked": "^17.0.1",
     "vue": "^3.4.21"
   },

package/src/App.vue

@@ -9,10 +9,10 @@
       </header>
     </div>
     <ChatPanel /> -->
-    <appMain />
+    <chatPanel />
   </div>
 </template>
 
 <script setup>
-import ChatPanel from './components/ChatPanel.vue';
+// import ChatPanel from './components/ChatPanel.vue';
 </script>

package/src/components/ChatPanel.vue

@@ -234,6 +234,20 @@ const handleSubmit = async () => {
 // 导入全局变量
 @import '../assets/_globals';
 
+.chat-container::before{
+    content: ' ';
+    position: fixed;
+    z-index: -10;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $background-color;
+    // background: url("@/static/img/statistics/004.jpg");
+    // background-size: 100% 100%;
+    background-repeat:repeat-y;
+}
+
 /* 为Markdown内容添加基本样式 */
 :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
   color: $text-secondary;

package/src/install.js

@@ -9,6 +9,7 @@ const components = [ChatPanel]
 export default {
   install(app) {
     components.forEach(component => {
+      console.log(component.name)
       app.component(component.name, component)
     })
   }

package/src/main.js

@@ -1,8 +1,8 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import './style.scss';
-import appMain from 'ai-chat-vue3'
-
-createApp(App).use(appMain).mount('#app');
+// import aiChat from 'ai-chat-vue3'
+import aiChat from './install.js'
+createApp(App).use(aiChat).mount('#app');
 
 

package/src/style.css

@@ -2,7 +2,6 @@
 :root {
   font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
   color: #f7f7f7;
-  background-color: #0b1220;
 }
 
 * {
@@ -18,7 +17,7 @@ body {
 }
 
 .page {
-  width: 1200px;
+  width: 1100px;
   margin: 0 auto;
   padding: 32px 0 100px;
 }

package/src/style.min.css

@@ -1 +1 @@
-:root{font-family:'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;color:#f7f7f7;background-color:#0b1220}*{box-sizing:border-box}body{margin:0}#app{min-height:100vh}.page{width:1200px;margin:0 auto;padding:32px 0 100px}.page .card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.35)}.page .card .title{color:#d0e0ff;font-weight:700;font-size:28px;letter-spacing:0.5px;margin:0 0 8px}.page .card .subtitle{color:#89a5d6;margin:0 0 20px;line-height:1.6}@keyframes spin{to{transform:rotate(360deg)}}.messages{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.15) rgba(255,255,255,0.03)}.messages::-webkit-scrollbar{width:6px}.messages::-webkit-scrollbar-track{background:rgba(255,255,255,0.03);border-radius:3px}.messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px;transition:background 0.3s ease}.messages::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.25)}
+:root{font-family:'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;color:#f7f7f7}*{box-sizing:border-box}body{margin:0}#app{min-height:100vh}.page{width:1100px;margin:0 auto;padding:32px 0 100px}.page .card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.35)}.page .card .title{color:#d0e0ff;font-weight:700;font-size:28px;letter-spacing:0.5px;margin:0 0 8px}.page .card .subtitle{color:#89a5d6;margin:0 0 20px;line-height:1.6}@keyframes spin{to{transform:rotate(360deg)}}.messages{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.15) rgba(255,255,255,0.03)}.messages::-webkit-scrollbar{width:6px}.messages::-webkit-scrollbar-track{background:rgba(255,255,255,0.03);border-radius:3px}.messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px;transition:background 0.3s ease}.messages::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.25)}

package/src/style.scss

@@ -4,7 +4,7 @@
 :root {
   font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
   color: $text-primary;
-  background-color: $background-color;
+  // background-color: $background-color;
 }
 
 * {