diff --git a/bricks/cols.js b/bricks/cols.js
index a7c3544..e9bd64f 100644
--- a/bricks/cols.js
+++ b/bricks/cols.js
@@ -55,6 +55,7 @@ bricks.Cols = class extends bricks.VBox {
 	}
 
 	async handle_click(rw, event){
+		event.stopPropagation();
 		var orev = null;
 		if (this.select_record){
 			orev = this.select_record;
@@ -64,6 +65,8 @@ bricks.Cols = class extends bricks.VBox {
 		}
 		this.select_record = rw;
 		this.select_record.set_css('selected_record');
+		console.log('record data=', rw.user_data);
+		this.dispatch('record_click', rw.user_data);
 	}
 	async dataHandle(d){
 		var data = d.rows;
@@ -77,6 +80,7 @@ bricks.Cols = class extends bricks.VBox {
 		for (var i=0;i<data.length;i++){
 			var d = data[i];
 			var w = await bricks.widgetBuild(this.record_view, this.main, d);
+			w.user_data = d;
 			w.bind('click', this.handle_click.bind(this, w));
 			w.set_attribute('data-page', page);
 			if (this.loader.is_max_page(page)){
@@ -112,8 +116,8 @@ bricks.Cols = class extends bricks.VBox {
 			this.main = new bricks.DynamicColumn({
 				width:"100%", 
 				col_cwidth:this.col_cwidth,
-				mobile_cols:this.mobile_cols,
-				mobile_cols:2});
+				mobile_cols:this.mobile_cols || 2
+			});
 			this.container.add_widget(this.main);
 			var d = await this.loader.loadData(p);
 			if (d){
diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css
index d71f1d8..ad18c58 100755
--- a/bricks/css/bricks.css
+++ b/bricks/css/bricks.css
@@ -90,6 +90,10 @@ hr {
 	padding: 4px;
 }
 
+.titlebar {
+	background-color: #d8d8c8;
+}
+
 .toppopup {
 	box-shadow: 10px 5px 10px #000, 0 -5px 5px #fff;
 }
diff --git a/bricks/dynamiccolumn.js b/bricks/dynamiccolumn.js
index 8d7945b..569ecfa 100644
--- a/bricks/dynamiccolumn.js
+++ b/bricks/dynamiccolumn.js
@@ -36,6 +36,7 @@ bricks.DynamicColumn = class extends bricks.Layout {
 		if (bricks.is_mobile() && width < height){
 			cols = this.mobile_cols;
 			cw = (width - (cols - 1) * gap) / cols;
+			console.log('====mobile==cols=', cols, '====');
 		} else {
 			if (this.col_cwidth){
 				cw = bricks.app.charsize * this.col_cwidth;
diff --git a/bricks/llm.js b/bricks/llm.js
index 3d1864b..9979694 100644
--- a/bricks/llm.js
+++ b/bricks/llm.js
@@ -174,11 +174,18 @@ bricks.LlmModel = class extends bricks.JsWidget {
 	}
 	inputdata2uploaddata(data){
 		var d = data;
+		var fmt = this.opts.user_message_format;
+		if (fmt){
+			var umsg = bricks.apply_data(fmt, inputdata2dic(data));
+			this.messages.push(umsg);
+		}
 		if (data instanceof FormData){
 			d.append('model', this.opts.model)
 			d.append('modelinstanceid', this.opts.modelinstanceid)
 			d.append('modeltypeid', this.opts.modeltypeid)
+			d.append('messages', JSON.stringify(this.messages));
 		} else {
+			d.messages = JSON.stringify(this.messages);
 			d.model = this.opts.model;
 			d.modelinstanceid = this.opts.modelinstanceid;
 			d.modeltypeid = this.opts.modeltypeid;
@@ -196,13 +203,6 @@ bricks.LlmModel = class extends bricks.JsWidget {
 					estimate_url:this.llmio.estimate_url,
 					output_view:this.opts.output_view});
 		this.llmio.o_w.add_widget(mout);
-		var fmt = this.opts.user_message_format || { role:'user', content:'${prompt}'};
-		var umsg = bricks.apply_data(fmt, inputdata2dic(data));
-		var d = {};
-		this.messages.push(umsg);
-		d.model = this.opts.model;
-		d.modelinstanceid = this.opts.modelinstanceid;
-		d.modeltypeid = this.opts.modeltypeid;
 		if (this.response_mode == 'stream' || this.response_mode == 'async') {
 			var d = this.inputdata2uploaddata(data);
 			var hr = new bricks.HttpResponseStream();
@@ -262,6 +262,7 @@ bricks.LlmIO = class extends bricks.VBox {
 	options:
 	{
 		user_icon:
+		list_models_url:
 		input_fields:
 		input_view:
 		output_view:
@@ -286,7 +287,21 @@ bricks.LlmIO = class extends bricks.VBox {
 		super(opts);
 		this.llmmodels = [];
 		this.title_w = new bricks.HBox({cheight:2});
-		this.i_w = new bricks.VBox({cheight:5});
+		this.i_w = new bricks.Icon({
+				rate:2, 
+				url:bricks_resource('imgs/input.png'),
+				tip:'input data',
+				css:'clickable'
+		});
+		this.nm_w = new bricks.Icon({
+				rate:2, 
+				url:bricks_resource('imgs/add.png'), 
+				tip:'add new model',
+				css:'clickable'
+		});
+		this.title_w.add_widget(this.nm_w);
+		this.nm_w.bind('click', this.open_search_models.bind(this));
+		this.i_w.bind('click', this.open_input_widget.bind(this));
 		this.o_w = new bricks.Filler({overflow:'auto'});
 		this.add_widget(this.title_w);
 		this.add_widget(this.o_w);
@@ -295,16 +310,126 @@ bricks.LlmIO = class extends bricks.VBox {
 		}
 		this.add_widget(this.i_w);
 		this.models.forEach( m =>{
-			if (this.textvoice){
-				m.textvoice = true;
-				m.tts_url = this.tts_url;
-			}
-			var lm = new bricks.LlmModel(this, m);
-			this.llmmodels.push(lm);
-			var tw = lm.render_title();
-			this.title_w.add_widget(tw);
+			this.show_added_model(m);
 		});
-		this.build_input();
+	}
+	show_added_model(m){
+		if (this.textvoice){
+			m.textvoice = true;
+			m.tts_url = this.tts_url;
+		}
+		var lm = new bricks.LlmModel(this, m);
+		this.llmmodels.push(lm);
+		var tw = lm.render_title();
+		this.title_w.add_widget(tw);
+	}
+	async open_search_models(event){
+		event.preventDefault();
+		event.stopPropagation();
+		var rect = this.showRectage();
+		var opts = {
+			title:"select model",
+			icon:bricks_resource('imgs/search.png'),
+			auto_destroy:true,
+			auto_open:true,
+			auto_dismiss:false,
+			movable:true,
+			top:rect.top + 'px',
+			left:rect.left + 'px',
+			width: rect.right - rect.left + 'px',
+			height: rect.bottom - rect.top + 'px'
+		}
+		var w = new bricks.PopupWindow(opts);
+		var sopts = {
+			data_url:this.list_models_url,
+			data_params:{
+				mii:this.models[0].modelinstanceid,
+				mti:this.models[0].modeltypeid
+			},
+			data_method:'POST',
+			col_cwidth: 24,
+			record_view:{
+				widgettype:"VBox",
+				options:{
+					cheight:20,
+					css:"card"
+				},
+				subwidgets:[
+					{
+						widgettype:"Title4",
+						options:{
+							text:"${name}"
+						}
+					},
+					{
+						widgettype:"Filler",
+						options:{
+							css:"scroll"
+						},
+						subwidgets:[
+							{
+								widgettype:"VBox",
+								options:{
+									css:"subcard"
+								},
+								subwidgets:[
+									{
+										widgettype:"Text",
+										options:{
+											text:"模型描述：${description}",
+											wrap:true
+										}
+									},
+									{
+										widgettype:"Text",
+										options:{
+											text:"启用日期：${enable_date}"
+										}
+									}
+								]
+							}
+						]
+					}
+				]
+			}
+		};
+		var cols = new bricks.Cols(sopts);
+		cols.bind('record_click', this.add_new_model.bind(this));
+		cols.bind('record_click', w.dismiss.bind(w));
+		w.add_widget(cols);
+		w.open();
+	}
+	async add_new_model(event){
+		event.preventDefault();
+		event.stopPropagation();
+		this.models.push(event.params);
+		this.show_added_model(event.params);
+	}
+	async open_input_widget(event){
+		event.preventDefault();
+		event.stopPropagation();
+		var rect = this.showRectage();
+		var opts = {
+			title:"input data",
+			icon:bricks_resource('imgs/input.png'),
+			auto_destroy:true,
+			auto_open:true,
+			auto_dismiss:false,
+			movable:true,
+			top:rect.top + 'px',
+			left:rect.left + 'px',
+			width: rect.right - rect.left + 'px',
+			height: rect.bottom - rect.top + 'px'
+		}
+		var w = new bricks.PopupWindow(opts);
+		var fopts = {
+			fields:this.input_fields
+		}
+		var fw = new bricks.Form(fopts);
+		fw.bind('submit', this.handle_input.bind(this));
+		fw.bind('submit', w.destroy.bind(w));
+		w.add_widget(fw);
+		w.open();
 	}
 	async handle_input(event){
 		var params = event.params;
@@ -320,9 +445,6 @@ bricks.LlmIO = class extends bricks.VBox {
 	async show_input(params){
 		var box = new bricks.HBox({width:'100%'});
 		var data = inputdata2dic(params);
-		if (data.prompt){
-			data.prompt = bricks.escapeSpecialChars(data.prompt);
-		}
 		console.log('data=', data, 'input_view=', this.input_view);
 		var w = await bricks.widgetBuild(this.input_view, this.o_w, data);
 		w.set_css(this.msg_css||'user_msg');
@@ -333,14 +455,6 @@ bricks.LlmIO = class extends bricks.VBox {
 		box.add_widget(img);
 		this.o_w.add_widget(box);
 	}
-	build_input(){
-		var fopts = {
-			fields:this.input_fields
-		};
-		var fw = new bricks.InlineForm(fopts);
-		fw.bind('submit', this.handle_input.bind(this));
-		this.i_w.add_widget(fw);
-	}
 }
 
 bricks.Factory.register('LlmIO', bricks.LlmIO);
diff --git a/bricks/popup.js b/bricks/popup.js
index ad69950..c1a28ac 100644
--- a/bricks/popup.js
+++ b/bricks/popup.js
@@ -10,8 +10,10 @@ bricks.Popup = class extends bricks.VBox {
 		auto_dismiss:boolean
 		auto_destroy:boolean
 		movable:boolean
+		dismiss_event:
 		resizable:boolean
 		modal:boolean
+		content:{}
 	*/
 	constructor(opts){
 		super(opts);
@@ -21,11 +23,10 @@ bricks.Popup = class extends bricks.VBox {
 		this.opened = false;
 		this.set_css('popup');
 		this.bring_to_top();
-		this.moving_w = this;
-		this.content_box = new bricks.VBox({width:'100%', height:'100%'});
-		this.content_box.set_style('display', 'flex');
-		this.content_box.set_style('overflow', 'auto');
+		this.content_box = new bricks.VBox({height:'100%',width:'100%'});
 		super.add_widget(this.content_box);
+		this.content_w = this.content_box;
+		this.moving_w = this;
 		if (this.auto_dismiss){
 			bricks.Body.bind('click', this.click_outside.bind(this));
 		}
@@ -41,6 +42,22 @@ bricks.Popup = class extends bricks.VBox {
 		this.set_style('display', 'none');
 		bricks.Body.add_widget(this);
 		this.bind('click', this.bring_to_top.bind(this));
+		if (this.auto_open){
+			this.open();
+		}
+		if (this.content){
+			this.bind('opened', this.load_content.bind(this))
+		}
+	}
+	async load_content(){
+		var w = bricks.widgetBuild(this.content, this);
+		if (w){
+			if (this.content.dismiss_event){
+				w.bind(this.content.dismiss_event, this.distroy.bind(this));
+			}
+			this.content_w.clear_widgets();
+			this.content_w.add_widget(w);
+		}
 	}
 	bring_to_top(){
 		if (this == bricks.app.toppopup){
@@ -50,6 +67,7 @@ bricks.Popup = class extends bricks.VBox {
 			bricks.app.toppopup.set_css('toppopup', true);
 		this.zindex = bricks.app.new_zindex();
 		this.set_style('zIndex', this.zindex);
+		console.log('this.zindex=', this.zindex, 'app.zindex=', bricks.app.zindex);
 		this.set_css('toppopup');
 		bricks.app.toppopup = this;
 	}
@@ -249,20 +267,6 @@ bricks.Popup = class extends bricks.VBox {
 			this.dismiss();
 		}
 	}
-	add_widget(w, index){
-		this.content_box.add_widget(w, index);
-		if (this.auto_open){
-			this.open();
-		} else {
-			// console.log('auto_open is ', this.auto_open, ' so not auto open it', this.opts, w);
-		}
-	}
-	remove_widget(w){
-		this.content_box.remove_widget(w);
-	}
-	clear_widgets(){
-		this.content_box.clear_widgets();
-	}
 	open(){
 		var rect, w, h;
 		if (this.opened) {
@@ -291,7 +295,7 @@ bricks.Popup = class extends bricks.VBox {
 		if (this.opts.modal && this.opts.widget){
 			this.target_w.disabled(true);
 		}
-		this.content_box.disabled(false);
+		this.bring_to_top();
 	}
 	dismiss(){
 		if (! this.opened) return;
@@ -319,6 +323,15 @@ bricks.Popup = class extends bricks.VBox {
 			this.parent = null;
 		}
 	}
+	add_widget(w, i){
+		return this.content_box.add_widget(w, i);
+	}
+	remove_widget(w){
+		return this.content_box.remove_widget(w);
+	}
+	clear_widgets(){
+		return this.content_box.clear_widgets();
+	}
 }
 
 bricks.PopupWindow = class extends bricks.Popup {
@@ -333,33 +346,24 @@ bricks.PopupWindow = class extends bricks.Popup {
 	constructor(opts){
 		opts.moviable = true;
 		opts.resizable = true;
-		opts.auto_open = true;
+		var ao = opts.auto_open;
+		opts.auto_open = false
 		opts.auto_dismiss = false;
 		opts.auto_destroy = false;
 		super(opts);
-		this.title_bar = new bricks.HBox({cheight:1.5, width:'100%'});
-		this.title_bar.set_css('titlebar')
+		this.auto_open = ao;
+		this.title_bar = new bricks.HBox({css:'titlebar', cheight:2, width:'100%'});
 		this.moving_w = this.title_bar;
-		this.parent_add_widget(this.title_bar);
+		super.add_widget(this.title_bar);
 		this.build_title_bar();
 		var filler = new bricks.Filler({});
-		this.parent_add_widget(filler)
+		super.add_widget(filler)
 		this.content_w = new bricks.Layout({});
 		this.content_w.set_css('flexbox');
-		this.auto_open = true;
 		filler.add_widget(this.content_w);
-		// console.log(this.auto_open, 'opts=', opts);
-	}
-	async load_content(){
-		var dic = {
-			"widgettype":"urlwidget",
-			"options":{
-				"params":this.params,
-				"url":this.url
-			}
+		if (this.auto_open){
+			this.open();
 		}
-		var w = bricks.widgetBuild(dic, bricks.Body);
-		this.add_widget(w);
 	}
 	build_title_bar(){
 		var icon = new bricks.Icon({
@@ -406,22 +410,6 @@ bricks.PopupWindow = class extends bricks.Popup {
 			this.title_w.set_text(txt);
 		}
 	}
-	parent_add_widget(w, index){
-		var ao = this.autho_open;
-		this.auto_open = false;
-		super.add_widget(w, index);
-		this.auto_open = ao;
-	}
-	add_widget(w, index){
-		// console.log('auto_open=', this.auto_open);
-		this.content_w.add_widget(w, index);
-		if (this.auto_open){
-			this.open();
-		} else {
-			this.open();
-			// console.log('auto_open is false, not auto open');
-		}
-	}
 	open(){
 		var f = bricks.app.docks.find(o => {
 			if (o == this){
@@ -439,6 +427,15 @@ bricks.PopupWindow = class extends bricks.Popup {
 		}
 		super.dismiss()
 	}
+	add_widget(w, i){
+		return this.content_w.add_widget(w, i);
+	}
+	remove_widget(w){
+		return this.content_w.remove_widget(w);
+	}
+	clear_widgets(){
+		return this.content_w.clear_widgets();
+	}
 }
 bricks.Dock = class extends bricks.HBox {
 	constructor(opts){
diff --git a/bricks/utils.js b/bricks/utils.js
index 283a235..939f4e2 100644
--- a/bricks/utils.js
+++ b/bricks/utils.js
@@ -5,6 +5,9 @@ var inputdata2dic = function(data){
 		var d = {}
 		for (let k of data.keys()){
 			var x = data.get(k);
+			if (k == 'prompt'){
+				x = bricks.escapeSpecialChars(x);
+			}	
 			d[k] = x;
 		}
 		return d;