bugfix

3parties/README.md

@@ -5,4 +5,8 @@ https://cdn.jsdelivr.net/npm/xterm@4.19.0/lib/xterm.js
 https://vjs.zencdn.net/8.10.0/video.min.js
 # webrtc_adapter.js
 come from https://github.com/googlecodelabs/webrtc-web
+# peerjs
+come from https://github.com/peers/peerjs
+https://cdnjs.cloudflare.com/ajax/libs/peerjs/1.5.2/peerjs.min.js
+
 

bricks/llm_dialog.js

@@ -1,16 +1,127 @@
 var bricks = window.bricks || {}
 
+bricks.UserMsgBox = class extends bricks.HBox {
+	/*
+	{
+		"icon",
+		"prompt",
+		"msg_css"
+	}
+	*/
+	constructor(opts){
+		super(opts);
+		var img = new bricks.Icon({rate:2,url:this.icon||bricks_resource('imgs/user.png')});
+		var w = new bricks.MdWidget({mdtext:this.prompt});
+		w.set_css(this.msg_css||'user_msg');
+		this.add_widget(w);
+		this.add_widget(img);
+	}
+}
+
+bricks.LlmMsgBox = class extends bricks.HBox {
+	/*
+	{
+		"model",
+		"mapi",
+		"url",
+		"icon",
+		"msg_css"
+		"response_mode"
+		"user_msg":{
+		}
+		
+		"llm_msg":{
+		}
+	}
+	*/
+	constructor(opts){
+		super(opts);
+		var img = new bricks.Icon({rate:2,url:this.icon||bricks_resource('imgs/user.png')});
+		this.w = new bricks.MdWidget({mdtext:' '});
+		this.run = new bricks.Running({target:this});
+		this.w.set_css(this.msg_css||'llm_msg');
+		this.add_widget(img);
+		this.add_widget(this.w);
+		this.messages = [];
+	}
+	responsed(){
+		this.run.dismiss();
+		this.w.md_content = '';
+	}
+	user_msg_format(){
+		return this.user_msg||{role:'user',content:"${prompt}"}
+	}
+	llm_msg_format(){
+		return this.llm_msg || {role:'assistant', content:"${content}"}
+	}
+	chunk_response(l){
+		var d = JSON.parse(l);
+		if (! d.content || d.content == ''){
+			return;
+		}
+		var txt = this.w.md_content + d.content;
+		this.w.set_content(txt);
+		this.bind('updated');
+	}
+	chunk_ended(){
+		var msg = this.llm_msg_format();
+		var lmsg = bricks.apply_data(msg, {content:txt});
+		this.messages.push(lmsg);
+	}
+	async set_prompt(prompt){
+		var msg = this.user_msg_format();
+		var umsg = bricks.apply_data(msg,{prompt:prompt});
+		this.messages.push(umsg);
+		var d = {
+			messages:this.messages,
+			mapi:this.mapi,
+			prompt:prompt,
+			model:this.model,
+		}
+		// console.log('messages=', this.messages, 'msg=', msg, 'umsg=', umsg);
+		if (this.response_mode == 'stream') {
+			var hr = new bricks.HttpResponseStream();
+			var resp = await hr.post(this.url, {params:d});
+			this.responsed();
+			await hr.handle_chunk(resp, this.chunk_response.bind(this));
+			this.chunk_ended();
+		} else {
+			var hj = new bricks.HttpJson()
+			var resp = await hj.post(this.url, {params:d});
+			if (this.response_mode == 'sync'){
+				this.responsed();
+				this.w.set_content(resp.content);
+				var msg = this.llm_msg_format();
+				var lmsg = bricks.apply_data(msg, resp);
+				this.messages.push(lmsg)
+			} else {
+				;
+			}
+		}
+	}
+}
+
 bricks.LlmDialog = class extends bricks.VBox {
 	/*
 	{
-		"url":
+		"models":[
-		"model",
+			{
-		"mapi":
+				"model":
+				"mapi":
+				"icon":
+				"url"
+				"css"
+				"user_msg":{
+				}
+				
+				"llm_msg":{
+				}
+			}
+		]
+		"response_mode":"stream", "async","async"
 		"user_msg_css"
 		"user_icon",
-		"llm_icon"
 		"title_ccs"
-		"llm_msg_css"
 	}
 	method:
 	set_prompt(prompt)
@@ -32,58 +143,35 @@ bricks.LlmDialog = class extends bricks.VBox {
 		this.body = new bricks.VScrollPanel({height:'100%'});
 		filler.add_widget(this.body);
 		this.add_widget(filler);
-		this.messages = [];
 	}
 	async set_prompt(prompt){
-		var box = new bricks.HBox({width:'100%'});
+		var box = new bricks.UserMsgBox({
-		var img = new bricks.Icon({rate:2,url:this.user_icon||bricks_resource('imgs/user.png')});
+				width:'100%',
-		var w = new bricks.MdWidget({mdtext:prompt});
+				icon:this.user_icon,
-		w.set_css(this.user_msg_css||'user_msg');
+				prompt:prompt,
-		box.add_widget(w);
+				msg_css:this.user_msg_css||'user_msg'
-		box.add_widget(img);
+		});
 		this.body.add_widget(box);
+		this.body.dom_element.scrollTop = this.body.dom_element.scrollHeight;
 		await this.llm_request(prompt);
 	}
 	async llm_request(prompt){
-		this.messages.push({
+		for (var i=0;i<this.models.length;i++){
-			role:'user',
+			var model = this.models[i];
-			content:prompt
+			var box = new bricks.LlmMsgBox({
-		});
+				width:'100%',
-		var d = {
+				response_mode:this.response_mode || 'stream',
-			messages:this.messages,
+				model:model.model,
-			mapi:this.mapi,
+				mapi:model.mapi,
-			prompt:prompt,
+				icon:model.icon,
-			model:this.model,
+				msg_css:model.css,
-		}
+				url:model.url,
-		var hr = new bricks.HttpResponseStream();
+				user_msg:model.user_msg,
-		var resp = await hr.post(this.url, {params:d});
+				llm_msg:model.llm_msg
-		await hr.handle_chunk(resp, this.processLine.bind(this));
+			});
-		this.messages.push({
-			role:'assistant',
-			content:this.llm_msg_w.md_content
-		});
-		this.llm_msg_w = null;
-		var d = {
-			model:this.model,
-			messages:this.messages
-		}
-		this.dispatch('llm_answered', d);
-	}
-	processLine(l){
-		var d = JSON.parse(l);
-		if (!this.llm_msg_w) {
-			var box = new bricks.HBox({width:'100%'});
-			var img = new bricks.Icon({rate:2,url:this.llm_icon||bricks_resource('imgs/llm.png')});
-			this.llm_msg_w = new bricks.MdWidget({mdtext:d.content});
-			this.llm_msg_w.set_css(this.llm_msg_css||'llm_msg');
-			box.add_widget(img);
-			box.add_widget(this.llm_msg_w);
 			this.body.add_widget(box);
-			return;
+			schedule_once(box.set_prompt.bind(box, prompt), 0.1);
 		}
-		var txt = this.llm_msg_w.md_content + d.content;
-		this.llm_msg_w.set_content(txt);
-		this.body.dom_element.scrollTop = this.body.dom_element.scrollHeight;
 	}
 }