From 53a31a15913f7e71e062f20cfa34319b6b7554f1 Mon Sep 17 00:00:00 2001
From: yumoqing <yumoqing@gmail.com>
Date: Thu, 20 Jun 2024 17:35:25 +0800
Subject: [PATCH] bugfix

---
 bricks/form.js     |  3 +++
 bricks/image.js    | 18 ++++++++++++++++
 bricks/input.js    | 51 +++++++++++++++++++++++++++++++++++++++++++++-
 bricks/jsoncall.js |  1 +
 bricks/llm.js      | 11 +++++-----
 bricks/modal.js    |  1 -
 bricks/tab.js      |  6 ++----
 bricks/widget.js   | 16 ++++++++++-----
 examples/form.ui   |  8 ++++++++
 9 files changed, 99 insertions(+), 16 deletions(-)

diff --git a/bricks/form.js b/bricks/form.js
index 444b6bf..ad709e2 100644
--- a/bricks/form.js
+++ b/bricks/form.js
@@ -83,6 +83,9 @@ bricks.FormBody = class extends bricks.VScrollPanel {
 		this.fg = new bricks.FieldGroup({});
 		this.fg.build_fields(form, this, form.opts.fields)
 	}
+	create(){
+		this.dom_element = this._create('form')
+	}
 }
 
 bricks.Form = class extends bricks.VBox {
diff --git a/bricks/image.js b/bricks/image.js
index fdad73b..6eabf1d 100755
--- a/bricks/image.js
+++ b/bricks/image.js
@@ -28,6 +28,24 @@ bricks.Image = class extends bricks.JsWidget {
 			this.dom_element.style.height = this.height;
 		}
 	}
+	base64(){
+		const image = this.dom_element;
+		// 创建一个画布来绘制图像
+		const canvas = document.createElement('canvas');
+		const ctx = canvas.getContext('2d');
+
+		// 设置画布大小与图像相同
+		canvas.width = image.width;
+		canvas.height = image.height;
+
+		// 将图像绘制到画布上
+		ctx.drawImage(image, 0, 0);
+
+		// 获取画布数据并转换为 base64
+		const dataURL = canvas.toDataURL('image/png'); // 可以根据需要修改图像格式
+		console.log(dataURL);
+		return dataURL;
+	}
 	set_url(url){
 		this.url = url;
 		this.dom_element.src = url;
diff --git a/bricks/input.js b/bricks/input.js
index 9a585d2..60d141e 100755
--- a/bricks/input.js
+++ b/bricks/input.js
@@ -125,6 +125,7 @@ bricks.UiStr =class extends bricks.UiType {
 		var el = this._create('input');
 		this.dom_element = el;
 		this.pattern = '.*';
+		el.autocomplete = 'off';
 		el.type = 'text';
 		el.id = this.name = el.name = this.opts.name;
 		if (this.opts.required)
@@ -336,7 +337,54 @@ bricks.UiFile =class extends bricks.UiStr {
 		return;
 		this.value = v;
 	}
+}
 
+bricks.UiImage =class extends bricks.VBox {
+	static uitype='image';
+	constructor(opts){
+		opts.name = opts.name || 'image';
+		super(options);
+		this.bind('drop', this.dropHandle.bind(this));
+		this.input = document.createElement('input');
+		this.input.type = 'file';
+		this.input.accept = 'image/*';
+		this.input.addEventListener('change', this.handleFileSelect.bind(this));
+		// this.bind('click', this.handleClick.bind(this));
+		this.add_widget(new bricks.Text({text:'drop in or click to choose file'}));
+		this.dom_element.appendChild(this.input);
+		this.imgw = null;
+	}
+	handleFileSelect(event){
+		const file = event.target.files[0];
+		this.show_image(file);
+	}
+	dropHandle(event){
+		e.preventDefault();
+		const file = e.dataTransfer.files[0];
+		this.show_image(file);
+
+	}
+	show_image(file) {
+		const reader = new FileReader();
+		reader.onload = (e) => {
+			this.clear_widgets();
+			this.imgw = new bricks.Image({
+				url:e.target.result,
+				width:'100%'
+			});
+			this.add_widget(this.imgw);
+		};
+		reader.readAsDataURL(file);
+	}
+	getValue(){
+		ret = {}
+		if (! this.imgw){
+			ret[this.name] = this.imgw.base64()
+		} else {
+			ret[this.name] = null;
+		}
+		return ret;
+	}
 }
 
 bricks.UiCheck =class extends bricks.UiType {
@@ -645,7 +693,7 @@ bricks.UiCode =class extends bricks.UiType {
 		if(event){
 			bricks.extend(params, event.params);
 		}
-		await loadData(params);
+		await this.loadData(params);
 	}
 	async loadData(params){
 		var jcall = bricks.jcall;
@@ -814,6 +862,7 @@ Input.register('UiCheck', bricks.UiCheck);
 Input.register('UiCheckBox', bricks.UiCheckBox);
 Input.register('UiEmail', bricks.UiEmail);
 Input.register('UiFile', bricks.UiFile);
+Input.register('UiImage', bricks.UiImage);
 Input.register('UiCode', bricks.UiCode);
 Input.register('UiText', bricks.UiText);
 Input.register('UiPassword', bricks.UiPassword);
diff --git a/bricks/jsoncall.js b/bricks/jsoncall.js
index f7616f7..8f3b540 100755
--- a/bricks/jsoncall.js
+++ b/bricks/jsoncall.js
@@ -213,6 +213,7 @@ bricks.HttpResponseStream = class extends bricks.HttpResponse {
 			buff_ += text;
 			const lines = buff_.split('\n');
 			for (var i=0;i<lines.length - 1; i++){
+				console.log('line=', lines[i]);
 				handler(lines[i]);
 			}
 			buff_ = lines[lines.length - 1];
diff --git a/bricks/llm.js b/bricks/llm.js
index 38d9e78..a132512 100644
--- a/bricks/llm.js
+++ b/bricks/llm.js
@@ -31,7 +31,7 @@ bricks.ModelOutput = class extends bricks.HBox {
 	}
 }
 
-bricks.LlmModel = class {
+bricks.LlmModel = class extends bricks.JsWidget {
 	/*
 		{
 			icon:
@@ -45,11 +45,11 @@ bricks.LlmModel = class {
 			llm_message_format:
 			use_session:
 			input_from:
-			io_mode:stream, sync or async
+			response_mode:stream, sync or async
 		}
 	*/
 	constructor(llmio, opts){
-		this.opts = opts;
+		super(opts);
 		this.llmio = llmio;
 		if (opts.use_session){
 			this.messages = [];
@@ -84,6 +84,7 @@ bricks.LlmModel = class {
 		} else {
 			d = bricks.extend({}, data);
 			d.model = this.opts.model;
+			d.mapi = this.mapi;
 		}
 		if (this.response_mode == 'stream') {
 			var hr = new bricks.HttpResponseStream();
@@ -126,7 +127,7 @@ bricks.LlmModel = class {
 		var merge_field = this.opts.merge_field || 'content';
 		this.stream_data[merge_field] += data[merge_field];
 	}
-	chunk_response(l, mout){
+	chunk_response(mout, l){
 		var d = JSON.parse(l);
 		if (! d.content || d.content == ''){
 			return;
@@ -138,7 +139,6 @@ bricks.LlmModel = class {
 		if (! this.messages) return;
 
 		var msg = this.llm_msg_format();
-		txt = bricks.escapeSpecialChars(txt);
 		var merge_field = this.opts.merge_field || 'content';
 		var txt = bricks.escapeSpecialChars(this.stream_data[merge_field]);
 		this.stream_data[merge_field] = txt;
@@ -204,6 +204,7 @@ bricks.LlmIO = class extends bricks.VBox {
 		w.set_css(this.msg_css||'user_msg');
 		w.set_css('filler');
 		var img = new bricks.Icon({rate:2,url:this.user_icon||bricks_resource('imgs/user.png')});
+		box.add_widget(new bricks.BlankIcon({rate:2, flexShrink:0}));
 		box.add_widget(w);
 		box.add_widget(img);
 		this.o_w.add_widget(box);
diff --git a/bricks/modal.js b/bricks/modal.js
index ac7b5dd..4f24784 100755
--- a/bricks/modal.js
+++ b/bricks/modal.js
@@ -75,7 +75,6 @@ bricks.BaseModal = class extends bricks.Layout {
 	}
 	open(){
 		this.dom_element.style.display = "";
-		console.log('this.timeout=', this.timeout);
 		if (this.timeout > 0){
 			this.timeout_task = schedule_once(this.dismiss.bind(this), this.timeout);
 		}
diff --git a/bricks/tab.js b/bricks/tab.js
index 510aabb..8e4fc3e 100755
--- a/bricks/tab.js
+++ b/bricks/tab.js
@@ -54,12 +54,10 @@ bricks.TabPanel = class extends bricks.Layout {
 		this.createToolbar();
 		this.set_css('tabpanel');
 		this.content_container.set_css('tabpanel-content');
+		this.show_first_tab();
 	}
 	show_first_tab(){
-		this.show_content_by_tab_name(this.opts.items[0].name);
-	}
-	show_content_by_tab_name(name){
-		this.toolbar.click(name);
+		this.toolbar.dispatch('command', this.opts.items[0]);
 	}
 	createToolbar(){
 		var desc = {
diff --git a/bricks/widget.js b/bricks/widget.js
index 04d7eb3..b94f979 100755
--- a/bricks/widget.js
+++ b/bricks/widget.js
@@ -9,9 +9,6 @@ bricks.JsWidget = class {
 		this.opts = options;
 		this.create();
 		this.opts_set_style();
-		if (this.opts.tooltip){
-			this.dom_element.tooltip = this.opts.tooltip;
-		}
 		this._container = false;
 		this.parent = null;
 		this.sizable_elements = [];
@@ -380,18 +377,27 @@ bricks.Tooltip = class extends bricks.Text {
 		opts.tip = null;
 		super(opts);
 		this.set_css('modal');
+		this.set_style('minWidth', '90px');
 	}
 	show(otext, event){
 		this.set_otext(otext);
+		this.set_style('zIndex', 999999999);
+		this.set_style('display', 'block');
 		var x,y;
 		x = event.clientX;
 		y = event.clientY;
-		this.set_style('zIndex', 999999999);
-		this.set_style('display', 'block');
+		if (x + this.dom_element.offsetWidth > bricks.Body.dom_element.clientWidth){
+			x = bricks.Body.dom_element.clientWidth - this.dom_element.offsetWidth;
+		}
+		if (y + this.dom_element.offsetHeight > bricks.Body.dom_element.clientHeight){
+			y = bricks.Body.dom_element.clientHeight - this.dom_element.offsetHeight;
+		}
 		this.set_style('left', x + 'px');
 		this.set_style('top', y + 'px');
+		console.log('moveover event happen');
 	}
 	hide(){
+		console.log('moveout event happen');
 		this.set_style('display', 'none');
 	}
 }
diff --git a/examples/form.ui b/examples/form.ui
index 831420a..8316d45 100644
--- a/examples/form.ui
+++ b/examples/form.ui
@@ -134,6 +134,14 @@
 						"dataurl":"test_code.json",
 						"required":true
 					},
+					{
+						"uitype":"image",
+						"name":"Image",
+						"height":"100px",
+						"width":"100px",
+						"label":"Image",
+						"required":true
+					},
 					{
 						"uitype":"text",
 						"name":"text",