fix: multi-file preview in UiFile, multi video/audio in UserInputView, concat assign in LlmOut

bricks/input.js

@@ -379,11 +379,15 @@ bricks.UiFile = class extends bricks.VBox {
 	/*
         accept:
         multiple:
+        preview: true to show file previews after selection
 	*/
 	constructor(opts){
 		opts.width = opts.width || '100%';
 		super(opts);
 		this.set_css('droparea');
+		this.accept = opts.accept || '';
+		this._preview = opts.preview !== undefined ? opts.preview : true;
+		this.preview_box = null;
 		this.bind('dragover', (event) => {
 			event.preventDefault();
 		});
@@ -409,6 +413,7 @@ bricks.UiFile = class extends bricks.VBox {
         var v = this.opts.value || this.opts.defaultvalue||'';
 		this.value = '';
         this.input.value = '';
+		this._clearPreview();
     }
 	handleFileSelect(event){
 		var files = [];
@@ -423,6 +428,7 @@ bricks.UiFile = class extends bricks.VBox {
 		} else {
 			this.value = files[0];
 		}
+		this._renderPreview(this.opts.multiple ? files : [files[0]]);
 		console.log('"changed" fired', this.value);
 		this.dispatch('changed', this.getValue());
 	}
@@ -458,9 +464,41 @@ bricks.UiFile = class extends bricks.VBox {
 			this.value = files[0];
 			this.set_input_file([this.value]);
 		}
+		this._renderPreview(this.opts.multiple ? files : [files[0]]);
 		this.dispatch('changed', this.getValue());
 		console.log('"changed" fired', this.getValue());
 	}
+	_clearPreview(){
+	if (this.preview_box){
+		this.remove_widget(this.preview_box);
+		this.preview_box = null;
+	}
+	}
+	_renderPreview(files){
+	if (!this._preview) return;
+	this._clearPreview();
+	if (!files || files.length === 0) return;
+	this.preview_box = new bricks.HBox({width:'100%', css:'filler'});
+	files.forEach(f => {
+		var url = URL.createObjectURL(f);
+		var typ = f.type.split('/')[0];
+		if (typ === 'image'){
+			var w = new bricks.Image({url:url, cheight:10, flexShrink:0, css:'card'});
+			this.preview_box.add_widget(w);
+		} else if (typ === 'video'){
+			var w = new bricks.VideoPlayer({url:url, width:'100%', autoplay:false});
+			this.preview_box.add_widget(w);
+		} else if (typ === 'audio'){
+			var w = new bricks.AudioPlayer({url:url, width:'100%', autoplay:false});
+			this.preview_box.add_widget(w);
+		}
+	});
+	if (this.preview_box._widgets && this.preview_box._widgets.length > 0){
+		this.add_widget(this.preview_box);
+	} else {
+		this.preview_box = null;
+	}
+	}
 	set_formdata(fd){
 		var v = this.resultValue();
 		if (this.opts.multiple && Array.isArray(v)){

bricks/llmout.js

@@ -7,29 +7,30 @@ bricks.UserInputView
 bricks.UserInputView = class extends bricks.VBox {
 	constructor(opts){
 		super(opts);
-		this.v_w = null;
+		this.v_ws = [];
-		this.a_v = null;
+		this.a_ws = [];
 		this.show_input(this.data);
 	}
 	show_input(data){
 		var mdtext = '';
+		this.v_ws = [];
+		this.a_ws = [];
 		this.input_fields.forEach(f =>{
 			if (data[f.name]){
 				if (f.name.startsWith('video')){
 					var url = URL.createObjectURL(data[f.name]);
-					this.v_w = new bricks.VideoPlayer({
+					this.v_ws.push(new bricks.VideoPlayer({
 						url:url,
-						autoplay:true,
+						autoplay:false,
 						width: '100%'
-					});
+					}));
 				} else if (f.name.startsWith('audio')){
 					var url = URL.createObjectURL(data[f.name]);
-					console.log('audio:', f.name, data[f.name]);
+					this.a_ws.push(new bricks.AudioPlayer({
-					this.a_w = new bricks.AudioPlayer({
 						url:url,
-						autoplay:true,
+						autoplay:false,
 						width: '100%'
-					});
+					}));
 				} else if (f.name.startsWith('image')){
 					var url = URL.createObjectURL(data[f.name]);
 					mdtext += `
@@ -53,12 +54,8 @@ ${data[f.name]}
 		});
 		console.log('mdtext=', mdtext);
 		this.add_widget(w);
-		if (this.v_w){
+		this.v_ws.forEach(v => this.add_widget(v));
-			this.add_widget(this.v_w);
+		this.a_ws.forEach(a => this.add_widget(a));
-		}
-		if (this.a_w){
-			this.add_widget(this.a_w);
-		}
 	}
 }
 /*
@@ -134,28 +131,28 @@ bricks.LlmOut = class extends bricks.VBox {
 		}
 		if (data.audio){
 			if (Array.isArray(data.audio)){
-				this.audios.concat(data.audio);
+				this.audios = this.audios.concat(data.audio);
 			} else {
 				this.audios.push(data.audio);
 			}
 		}
 		if (data.glb){
 			if (Array.isArray(data.glb)){
-				this.glbs.concat(data.glb);
+				this.glbs = this.glbs.concat(data.glb);
 			} else {
 				this.glbs.push(data.glb);
 			}
 		}
 		if (data.video){
 			if (Array.isArray(data.video)){
-				this.videos.concat(data.video);
+				this.videos = this.videos.concat(data.video);
 			} else {
 				this.videos.push(data.video);
 			}
 		}
 		if (data.image){
 			if (Array.isArray(data.image)){
-				this.images.concat(data.image);
+				this.images = this.images.concat(data.image);
 			} else {
 				this.images.push(data.image);
 			}