chat msg display inline for newlines

srcs/requirements/svelte/api_front/public/build/bundle.css

@@ -28,4 +28,4 @@ header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4b
 			/ auto        1fr         auto        }form.svelte-yo0any input[type=checkbox].svelte-yo0any.svelte-yo0any{display:none}form.svelte-yo0any label._checkbox.svelte-yo0any.svelte-yo0any{margin:0px auto 0px 10px;padding-left:10px;cursor:pointer}form.svelte-yo0any label._checkbox.svelte-yo0any.svelte-yo0any::after{content:"";position:absolute;top:calc(50% - 6px);left:0px;width:12px;height:12px;border:2px solid rgb(150, 150, 150);box-sizing:border-box;cursor:pointer}form.svelte-yo0any input[type=checkbox].svelte-yo0any:checked+label._checkbox.svelte-yo0any::after{background-color:rgb(200, 200, 200)}form.svelte-yo0any label._select.svelte-yo0any.svelte-yo0any{flex-direction:row}form.svelte-yo0any label._select p.svelte-yo0any.svelte-yo0any{margin:0px}form.svelte-yo0any select.svelte-yo0any.svelte-yo0any{margin:auto auto auto 10px;background-color:rgb(220, 220, 220);border:none;padding:5px;cursor:pointer}form.svelte-yo0any select.svelte-yo0any.svelte-yo0any:hover{background-color:rgb(200, 200, 200)}form.svelte-yo0any input[type=submit].svelte-yo0any.svelte-yo0any{margin-top:20px}.grid_box.svelte-1fj8iha .back      {grid-area:back}.grid_box.svelte-1fj8iha .user      {grid-area:user}.grid_box.svelte-1fj8iha .close     {grid-area:close}.grid_box.svelte-1fj8iha .room_name {grid-area:room_name}.grid_box.svelte-1fj8iha .panel_user{grid-area:panel_user}.grid_box.svelte-1fj8iha{grid:' back        user        close       ' auto
 			' room_name   room_name   room_name   ' auto
 			' panel_user  panel_user  panel_user  ' 1fr
-			/ auto        1fr         auto        }.panel_user.svelte-1fj8iha{margin-top:-5px}.chat_msg.svelte-jmr7oa.svelte-jmr7oa{white-space:pre-wrap;margin:5px auto;padding:5px;border-radius:5px}.msg_thread .chat_msg.svelte-jmr7oa.svelte-jmr7oa{margin-left:0px;background-color:rgb(210, 210, 210);max-width:80%}.chat_msg.svelte-jmr7oa p.svelte-jmr7oa{padding:0px}.chat_msg.svelte-jmr7oa p.name.svelte-jmr7oa{margin:0px;font-size:12px;color:rgb(100, 100, 100)}.chat_msg.svelte-jmr7oa p.msg.svelte-jmr7oa{margin:5px 0px}.chat_msg.me.svelte-jmr7oa.svelte-jmr7oa{margin-right:0px;margin-left:auto;background-color:rgb(210, 110, 10)}.chat_msg.me.svelte-jmr7oa p.name.svelte-jmr7oa{display:none}.chat_msg.SERVER.svelte-jmr7oa.svelte-jmr7oa{margin-left:auto;background-color:transparent}.chat_msg.SERVER.svelte-jmr7oa p.name.svelte-jmr7oa{display:none}.chat_msg.SERVER.svelte-jmr7oa p.msg.svelte-jmr7oa{margin:0px auto;font-size:12px;color:rgb(100, 100, 100)}
+			/ auto        1fr         auto        }.panel_user.svelte-1fj8iha{margin-top:-5px}.chat_msg.svelte-14xxpbz.svelte-14xxpbz{margin:5px auto;padding:5px;border-radius:5px}.chat_msg.svelte-14xxpbz.svelte-14xxpbz{margin-left:0px;background-color:rgb(210, 210, 210);max-width:80%}.chat_msg.svelte-14xxpbz p.svelte-14xxpbz{padding:0px}.chat_msg.svelte-14xxpbz p.name.svelte-14xxpbz{margin:0px;font-size:12px;color:rgb(100, 100, 100)}.chat_msg.svelte-14xxpbz p.msg.svelte-14xxpbz{margin:5px 0px}.chat_msg.svelte-14xxpbz p.msg.svelte-14xxpbz *{display:inline}.chat_msg.me.svelte-14xxpbz.svelte-14xxpbz{margin-right:0px;margin-left:auto;background-color:rgb(210, 110, 10)}.chat_msg.me.svelte-14xxpbz p.name.svelte-14xxpbz{display:none}.chat_msg.SERVER.svelte-14xxpbz.svelte-14xxpbz{margin-left:auto;background-color:transparent}.chat_msg.SERVER.svelte-14xxpbz p.name.svelte-14xxpbz{display:none}.chat_msg.SERVER.svelte-14xxpbz p.msg.svelte-14xxpbz{margin:0px auto;font-size:12px;color:rgb(100, 100, 100)}

srcs/requirements/svelte/api_front/public/build/bundle.js

@@ -182,6 +182,44 @@ var app = (function () {
         e.initCustomEvent(type, bubbles, cancelable, detail);
         return e;
     }
+    class HtmlTag {
+        constructor(is_svg = false) {
+            this.is_svg = false;
+            this.is_svg = is_svg;
+            this.e = this.n = null;
+        }
+        c(html) {
+            this.h(html);
+        }
+        m(html, target, anchor = null) {
+            if (!this.e) {
+                if (this.is_svg)
+                    this.e = svg_element(target.nodeName);
+                else
+                    this.e = element(target.nodeName);
+                this.t = target;
+                this.c(html);
+            }
+            this.i(anchor);
+        }
+        h(html) {
+            this.e.innerHTML = html;
+            this.n = Array.from(this.e.childNodes);
+        }
+        i(anchor) {
+            for (let i = 0; i < this.n.length; i += 1) {
+                insert(this.t, this.n[i], anchor);
+            }
+        }
+        p(html) {
+            this.d();
+            this.h(html);
+            this.i(this.a);
+        }
+        d() {
+            this.n.forEach(detach);
+        }
+    }
 
     let current_component;
     function set_current_component(component) {
@@ -478,6 +516,96 @@ var app = (function () {
         : typeof globalThis !== 'undefined'
             ? globalThis
             : global);
+    function outro_and_destroy_block(block, lookup) {
+        transition_out(block, 1, 1, () => {
+            lookup.delete(block.key);
+        });
+    }
+    function update_keyed_each(old_blocks, dirty, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block, next, get_context) {
+        let o = old_blocks.length;
+        let n = list.length;
+        let i = o;
+        const old_indexes = {};
+        while (i--)
+            old_indexes[old_blocks[i].key] = i;
+        const new_blocks = [];
+        const new_lookup = new Map();
+        const deltas = new Map();
+        i = n;
+        while (i--) {
+            const child_ctx = get_context(ctx, list, i);
+            const key = get_key(child_ctx);
+            let block = lookup.get(key);
+            if (!block) {
+                block = create_each_block(key, child_ctx);
+                block.c();
+            }
+            else if (dynamic) {
+                block.p(child_ctx, dirty);
+            }
+            new_lookup.set(key, new_blocks[i] = block);
+            if (key in old_indexes)
+                deltas.set(key, Math.abs(i - old_indexes[key]));
+        }
+        const will_move = new Set();
+        const did_move = new Set();
+        function insert(block) {
+            transition_in(block, 1);
+            block.m(node, next);
+            lookup.set(block.key, block);
+            next = block.first;
+            n--;
+        }
+        while (o && n) {
+            const new_block = new_blocks[n - 1];
+            const old_block = old_blocks[o - 1];
+            const new_key = new_block.key;
+            const old_key = old_block.key;
+            if (new_block === old_block) {
+                // do nothing
+                next = new_block.first;
+                o--;
+                n--;
+            }
+            else if (!new_lookup.has(old_key)) {
+                // remove old block
+                destroy(old_block, lookup);
+                o--;
+            }
+            else if (!lookup.has(new_key) || will_move.has(new_key)) {
+                insert(new_block);
+            }
+            else if (did_move.has(old_key)) {
+                o--;
+            }
+            else if (deltas.get(new_key) > deltas.get(old_key)) {
+                did_move.add(new_key);
+                insert(new_block);
+            }
+            else {
+                will_move.add(old_key);
+                o--;
+            }
+        }
+        while (o--) {
+            const old_block = old_blocks[o];
+            if (!new_lookup.has(old_block.key))
+                destroy(old_block, lookup);
+        }
+        while (n)
+            insert(new_blocks[n - 1]);
+        return new_blocks;
+    }
+    function validate_each_keys(ctx, list, get_context, get_key) {
+        const keys = new Set();
+        for (let i = 0; i < list.length; i++) {
+            const key = get_key(get_context(ctx, list, i));
+            if (keys.has(key)) {
+                throw new Error('Cannot have duplicate keys in a keyed each');
+            }
+            keys.add(key);
+        }
+    }
 
     function get_spread_update(levels, updates) {
         const update = {};
@@ -975,7 +1103,7 @@ var app = (function () {
 
     /* node_modules/svelte-spa-router/Router.svelte generated by Svelte v3.53.1 */
 
-    const { Error: Error_1, Object: Object_1, console: console_1$8 } = globals;
+    const { Error: Error_1, Object: Object_1, console: console_1$9 } = globals;
 
     // (267:0) {:else}
     function create_else_block$5(ctx) {
@@ -1755,7 +1883,7 @@ var app = (function () {
     	const writable_props = ['routes', 'prefix', 'restoreScrollState'];
 
     	Object_1.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$8.warn(`<Router> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$9.warn(`<Router> was created with unknown prop '${key}'`);
     	});
 
     	function routeEvent_handler(event) {
@@ -2039,7 +2167,7 @@ var app = (function () {
 
     /* src/pieces/Header.svelte generated by Svelte v3.53.1 */
 
-    const { console: console_1$7 } = globals;
+    const { console: console_1$8 } = globals;
     const file$p = "src/pieces/Header.svelte";
 
     // (24:39) 
@@ -2268,7 +2396,7 @@ var app = (function () {
     	const writable_props = [];
 
     	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$7.warn(`<Header> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$8.warn(`<Header> was created with unknown prop '${key}'`);
     	});
 
     	const click_handler = () => push('/');
@@ -2768,7 +2896,7 @@ var app = (function () {
 
     /* src/pieces/chat/Chat_button.svelte generated by Svelte v3.53.1 */
 
-    const { console: console_1$6 } = globals;
+    const { console: console_1$7 } = globals;
     const file$n = "src/pieces/chat/Chat_button.svelte";
 
     function create_fragment$o(ctx) {
@@ -2894,7 +3022,7 @@ var app = (function () {
     	const writable_props = ['my_class', 'my_title', 'layout', 'new_layout', 'on_click'];
 
     	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$6.warn(`<Chat_button> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$7.warn(`<Chat_button> was created with unknown prop '${key}'`);
     	});
 
     	$$self.$$set = $$props => {
@@ -3360,23 +3488,25 @@ var app = (function () {
     	let t0;
     	let t1;
     	let p1;
-    	let t2;
     	let div_class_value;
+    	let current;
+    	const default_slot_template = /*#slots*/ ctx[2].default;
+    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[1], null);
 
     	const block = {
     		c: function create() {
     			div = element("div");
     			p0 = element("p");
-    			t0 = text(/*name*/ ctx[1]);
+    			t0 = text(/*name*/ ctx[0]);
     			t1 = space();
     			p1 = element("p");
-    			t2 = text(/*content*/ ctx[0]);
+    			if (default_slot) default_slot.c();
-    			attr_dev(p0, "class", "name svelte-jmr7oa");
+    			attr_dev(p0, "class", "name svelte-14xxpbz");
-    			add_location(p0, file$l, 8, 1, 92);
+    			add_location(p0, file$l, 7, 1, 71);
-    			attr_dev(p1, "class", "msg svelte-jmr7oa");
+    			attr_dev(p1, "class", "msg svelte-14xxpbz");
-    			add_location(p1, file$l, 9, 1, 120);
+    			add_location(p1, file$l, 8, 1, 99);
-    			attr_dev(div, "class", div_class_value = "chat_msg " + /*name*/ ctx[1] + " svelte-jmr7oa");
+    			attr_dev(div, "class", div_class_value = "chat_msg " + /*name*/ ctx[0] + " svelte-14xxpbz");
-    			add_location(div, file$l, 7, 0, 61);
+    			add_location(div, file$l, 6, 0, 40);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -3387,20 +3517,47 @@ var app = (function () {
     			append_dev(p0, t0);
     			append_dev(div, t1);
     			append_dev(div, p1);
-    			append_dev(p1, t2);
+
+    			if (default_slot) {
+    				default_slot.m(p1, null);
+    			}
+
+    			current = true;
     		},
     		p: function update(ctx, [dirty]) {
-    			if (dirty & /*name*/ 2) set_data_dev(t0, /*name*/ ctx[1]);
+    			if (!current || dirty & /*name*/ 1) set_data_dev(t0, /*name*/ ctx[0]);
-    			if (dirty & /*content*/ 1) set_data_dev(t2, /*content*/ ctx[0]);
 
-    			if (dirty & /*name*/ 2 && div_class_value !== (div_class_value = "chat_msg " + /*name*/ ctx[1] + " svelte-jmr7oa")) {
+    			if (default_slot) {
+    				if (default_slot.p && (!current || dirty & /*$$scope*/ 2)) {
+    					update_slot_base(
+    						default_slot,
+    						default_slot_template,
+    						ctx,
+    						/*$$scope*/ ctx[1],
+    						!current
+    						? get_all_dirty_from_scope(/*$$scope*/ ctx[1])
+    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[1], dirty, null),
+    						null
+    					);
+    				}
+    			}
+
+    			if (!current || dirty & /*name*/ 1 && div_class_value !== (div_class_value = "chat_msg " + /*name*/ ctx[0] + " svelte-14xxpbz")) {
     				attr_dev(div, "class", div_class_value);
     			}
     		},
-    		i: noop,
+    		i: function intro(local) {
-    		o: noop,
+    			if (current) return;
+    			transition_in(default_slot, local);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(default_slot, local);
+    			current = false;
+    		},
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(div);
+    			if (default_slot) default_slot.d(detaching);
     		}
     	};
 
@@ -3417,49 +3574,43 @@ var app = (function () {
 
     function instance$m($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
-    	validate_slots('Chat_msg', slots, []);
+    	validate_slots('Chat_msg', slots, ['default']);
-    	let { content } = $$props;
     	let { name } = $$props;
 
     	$$self.$$.on_mount.push(function () {
-    		if (content === undefined && !('content' in $$props || $$self.$$.bound[$$self.$$.props['content']])) {
-    			console.warn("<Chat_msg> was created without expected prop 'content'");
-    		}
-
     		if (name === undefined && !('name' in $$props || $$self.$$.bound[$$self.$$.props['name']])) {
     			console.warn("<Chat_msg> was created without expected prop 'name'");
     		}
     	});
 
-    	const writable_props = ['content', 'name'];
+    	const writable_props = ['name'];
 
     	Object.keys($$props).forEach(key => {
     		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Chat_msg> was created with unknown prop '${key}'`);
     	});
 
     	$$self.$$set = $$props => {
-    		if ('content' in $$props) $$invalidate(0, content = $$props.content);
+    		if ('name' in $$props) $$invalidate(0, name = $$props.name);
-    		if ('name' in $$props) $$invalidate(1, name = $$props.name);
+    		if ('$$scope' in $$props) $$invalidate(1, $$scope = $$props.$$scope);
     	};
 
-    	$$self.$capture_state = () => ({ content, name });
+    	$$self.$capture_state = () => ({ name });
 
     	$$self.$inject_state = $$props => {
-    		if ('content' in $$props) $$invalidate(0, content = $$props.content);
+    		if ('name' in $$props) $$invalidate(0, name = $$props.name);
-    		if ('name' in $$props) $$invalidate(1, name = $$props.name);
     	};
 
     	if ($$props && "$$inject" in $$props) {
     		$$self.$inject_state($$props.$$inject);
     	}
 
-    	return [content, name];
+    	return [name, $$scope, slots];
     }
 
     class Chat_msg extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$m, create_fragment$m, safe_not_equal, { content: 0, name: 1 });
+    		init(this, options, instance$m, create_fragment$m, safe_not_equal, { name: 0 });
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
@@ -3469,14 +3620,6 @@ var app = (function () {
     		});
     	}
 
-    	get content() {
-    		throw new Error("<Chat_msg>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
-    	}
-
-    	set content(value) {
-    		throw new Error("<Chat_msg>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
-    	}
-
     	get name() {
     		throw new Error("<Chat_msg>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
     	}
@@ -3487,6 +3630,8 @@ var app = (function () {
     }
 
     /* src/pieces/chat/Layout_room.svelte generated by Svelte v3.53.1 */
+
+    const { console: console_1$6 } = globals;
     const file$k = "src/pieces/chat/Layout_room.svelte";
 
     function get_each_context$1(ctx, list, i) {
@@ -3495,8 +3640,8 @@ var app = (function () {
     	return child_ctx;
     }
 
-    // (48:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
+    // (49:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
-    function create_default_slot_3$4(ctx) {
+    function create_default_slot_4$2(ctx) {
     	let t;
 
     	const block = {
@@ -3513,17 +3658,17 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_default_slot_3$4.name,
+    		id: create_default_slot_4$2.name,
     		type: "slot",
-    		source: "(48:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
+    		source: "(49:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
     		ctx
     	});
 
     	return block;
     }
 
-    // (53:1) <Button bind:layout new_layout="room_set" my_class="room_name transparent">
+    // (54:1) <Button bind:layout new_layout="room_set" my_class="room_name transparent">
-    function create_default_slot_2$8(ctx) {
+    function create_default_slot_3$4(ctx) {
     	let t;
 
     	const block = {
@@ -3540,17 +3685,17 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_default_slot_2$8.name,
+    		id: create_default_slot_3$4.name,
     		type: "slot",
-    		source: "(53:1) <Button bind:layout new_layout=\\\"room_set\\\" my_class=\\\"room_name transparent\\\">",
+    		source: "(54:1) <Button bind:layout new_layout=\\\"room_set\\\" my_class=\\\"room_name transparent\\\">",
     		ctx
     	});
 
     	return block;
     }
 
-    // (58:1) <Button bind:layout new_layout="close" my_class="close icon">
+    // (59:1) <Button bind:layout new_layout="close" my_class="close icon">
-    function create_default_slot_1$8(ctx) {
+    function create_default_slot_2$8(ctx) {
     	let t;
 
     	const block = {
@@ -3567,40 +3712,88 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_default_slot_1$8.name,
+    		id: create_default_slot_2$8.name,
     		type: "slot",
-    		source: "(58:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
+    		source: "(59:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
     		ctx
     	});
 
     	return block;
     }
 
-    // (65:3) {#each msgs as msg}
+    // (67:4) <Msg name={msg.name}>
-    function create_each_block$1(ctx) {
+    function create_default_slot_1$8(ctx) {
+    	let html_tag;
+    	let raw_value = /*msg*/ ctx[4].content + "";
+    	let html_anchor;
+
+    	const block = {
+    		c: function create() {
+    			html_tag = new HtmlTag(false);
+    			html_anchor = empty();
+    			html_tag.a = html_anchor;
+    		},
+    		m: function mount(target, anchor) {
+    			html_tag.m(raw_value, target, anchor);
+    			insert_dev(target, html_anchor, anchor);
+    		},
+    		p: function update(ctx, dirty) {
+    			if (dirty & /*msgs*/ 8 && raw_value !== (raw_value = /*msg*/ ctx[4].content + "")) html_tag.p(raw_value);
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(html_anchor);
+    			if (detaching) html_tag.d();
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_default_slot_1$8.name,
+    		type: "slot",
+    		source: "(67:4) <Msg name={msg.name}>",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (66:3) {#each msgs as msg (msg.id)}
+    function create_each_block$1(key_1, ctx) {
+    	let first;
     	let msg_1;
     	let current;
 
     	msg_1 = new Chat_msg({
     			props: {
     				name: /*msg*/ ctx[4].name,
-    				content: /*msg*/ ctx[4].content
+    				$$slots: { default: [create_default_slot_1$8] },
+    				$$scope: { ctx }
     			},
     			$$inline: true
     		});
 
     	const block = {
+    		key: key_1,
+    		first: null,
     		c: function create() {
+    			first = empty();
     			create_component(msg_1.$$.fragment);
+    			this.first = first;
     		},
     		m: function mount(target, anchor) {
+    			insert_dev(target, first, anchor);
     			mount_component(msg_1, target, anchor);
     			current = true;
     		},
-    		p: function update(ctx, dirty) {
+    		p: function update(new_ctx, dirty) {
+    			ctx = new_ctx;
     			const msg_1_changes = {};
     			if (dirty & /*msgs*/ 8) msg_1_changes.name = /*msg*/ ctx[4].name;
-    			if (dirty & /*msgs*/ 8) msg_1_changes.content = /*msg*/ ctx[4].content;
+
+    			if (dirty & /*$$scope, msgs*/ 65544) {
+    				msg_1_changes.$$scope = { dirty, ctx };
+    			}
+
     			msg_1.$set(msg_1_changes);
     		},
     		i: function intro(local) {
@@ -3613,6 +3806,7 @@ var app = (function () {
     			current = false;
     		},
     		d: function destroy(detaching) {
+    			if (detaching) detach_dev(first);
     			destroy_component(msg_1, detaching);
     		}
     	};
@@ -3621,14 +3815,14 @@ var app = (function () {
     		block,
     		id: create_each_block$1.name,
     		type: "each",
-    		source: "(65:3) {#each msgs as msg}",
+    		source: "(66:3) {#each msgs as msg (msg.id)}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (84:1) <Button my_class="send" on_click={send_msg}>
+    // (88:1) <Button my_class="send" on_click={send_msg}>
     function create_default_slot$a(ctx) {
     	let t;
 
@@ -3648,7 +3842,7 @@ var app = (function () {
     		block,
     		id: create_default_slot$a.name,
     		type: "slot",
-    		source: "(84:1) <Button my_class=\\\"send\\\" on_click={send_msg}>",
+    		source: "(88:1) <Button my_class=\\\"send\\\" on_click={send_msg}>",
     		ctx
     	});
 
@@ -3668,6 +3862,8 @@ var app = (function () {
     	let t2;
     	let div1;
     	let div0;
+    	let each_blocks = [];
+    	let each_1_lookup = new Map();
     	let t3;
     	let div3;
     	let div2;
@@ -3685,7 +3881,7 @@ var app = (function () {
     		new_layout: /*back*/ ctx[1],
     		my_class: "back icon",
     		my_title: "go back " + /*back*/ ctx[1],
-    		$$slots: { default: [create_default_slot_3$4] },
+    		$$slots: { default: [create_default_slot_4$2] },
     		$$scope: { ctx }
     	};
 
@@ -3703,7 +3899,7 @@ var app = (function () {
     	let button1_props = {
     		new_layout: "room_set",
     		my_class: "room_name transparent",
-    		$$slots: { default: [create_default_slot_2$8] },
+    		$$slots: { default: [create_default_slot_3$4] },
     		$$scope: { ctx }
     	};
 
@@ -3721,7 +3917,7 @@ var app = (function () {
     	let button2_props = {
     		new_layout: "close",
     		my_class: "close icon",
-    		$$slots: { default: [create_default_slot_1$8] },
+    		$$slots: { default: [create_default_slot_2$8] },
     		$$scope: { ctx }
     	};
 
@@ -3733,16 +3929,15 @@ var app = (function () {
     	binding_callbacks.push(() => bind(button2, 'layout', button2_layout_binding));
     	let each_value = /*msgs*/ ctx[3];
     	validate_each_argument(each_value);
-    	let each_blocks = [];
+    	const get_key = ctx => /*msg*/ ctx[4].id;
+    	validate_each_keys(ctx, each_value, get_each_context$1, get_key);
 
     	for (let i = 0; i < each_value.length; i += 1) {
-    		each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
+    		let child_ctx = get_each_context$1(ctx, each_value, i);
+    		let key = get_key(child_ctx);
+    		each_1_lookup.set(key, each_blocks[i] = create_each_block$1(key, child_ctx));
     	}
 
-    	const out = i => transition_out(each_blocks[i], 1, 1, () => {
-    		each_blocks[i] = null;
-    	});
-
     	button3 = new Chat_button({
     			props: {
     				my_class: "send",
@@ -3775,17 +3970,17 @@ var app = (function () {
     			t4 = space();
     			create_component(button3.$$.fragment);
     			attr_dev(div0, "class", "msg_thread svelte-rmdfjs");
-    			add_location(div0, file$k, 63, 2, 1047);
+    			add_location(div0, file$k, 64, 2, 1067);
     			attr_dev(div1, "class", "panel panel_msg svelte-rmdfjs");
-    			add_location(div1, file$k, 62, 1, 1015);
+    			add_location(div1, file$k, 63, 1, 1035);
     			attr_dev(div2, "class", "text_area svelte-rmdfjs");
     			attr_dev(div2, "contenteditable", "true");
     			if (/*msg*/ ctx[4] === void 0) add_render_callback(() => /*div2_input_handler*/ ctx[10].call(div2));
-    			add_location(div2, file$k, 72, 2, 1219);
+    			add_location(div2, file$k, 76, 2, 1288);
     			attr_dev(div3, "class", "panel_write svelte-rmdfjs");
-    			add_location(div3, file$k, 71, 1, 1191);
+    			add_location(div3, file$k, 72, 1, 1221);
     			attr_dev(div4, "class", "grid_box svelte-rmdfjs");
-    			add_location(div4, file$k, 44, 0, 627);
+    			add_location(div4, file$k, 45, 0, 647);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -3873,28 +4068,9 @@ var app = (function () {
     			if (dirty & /*msgs*/ 8) {
     				each_value = /*msgs*/ ctx[3];
     				validate_each_argument(each_value);
-    				let i;
-
-    				for (i = 0; i < each_value.length; i += 1) {
-    					const child_ctx = get_each_context$1(ctx, each_value, i);
-
-    					if (each_blocks[i]) {
-    						each_blocks[i].p(child_ctx, dirty);
-    						transition_in(each_blocks[i], 1);
-    					} else {
-    						each_blocks[i] = create_each_block$1(child_ctx);
-    						each_blocks[i].c();
-    						transition_in(each_blocks[i], 1);
-    						each_blocks[i].m(div0, null);
-    					}
-    				}
-
     				group_outros();
-
+    				validate_each_keys(ctx, each_value, get_each_context$1, get_key);
-    				for (i = each_value.length; i < each_blocks.length; i += 1) {
+    				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div0, outro_and_destroy_block, create_each_block$1, null, get_each_context$1);
-    					out(i);
-    				}
-
     				check_outros();
     			}
 
@@ -3927,7 +4103,6 @@ var app = (function () {
     			transition_out(button0.$$.fragment, local);
     			transition_out(button1.$$.fragment, local);
     			transition_out(button2.$$.fragment, local);
-    			each_blocks = each_blocks.filter(Boolean);
 
     			for (let i = 0; i < each_blocks.length; i += 1) {
     				transition_out(each_blocks[i]);
@@ -3941,7 +4116,11 @@ var app = (function () {
     			destroy_component(button0);
     			destroy_component(button1);
     			destroy_component(button2);
-    			destroy_each(each_blocks, detaching);
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].d();
+    			}
+
     			/*div2_binding*/ ctx[11](null);
     			destroy_component(button3);
     			mounted = false;
@@ -3967,8 +4146,8 @@ var app = (function () {
     	let { back = "" } = $$props;
     	let msg = "";
     	let text_area;
-    	let index = 0;
     	let msgs = [];
+    	let index = 0;
 
     	function add_msg(from, the_msg) {
     		$$invalidate(3, msgs = [...msgs, { id: index, content: the_msg, name: from }]);
@@ -3977,6 +4156,7 @@ var app = (function () {
 
     	function send_msg() {
     		$$invalidate(4, msg = msg.trim());
+    		console.log(msg);
 
     		if (msg.length > 0) {
     			//socket.emit('sendmsg', msg);
@@ -3997,7 +4177,7 @@ var app = (function () {
     	const writable_props = ['layout', 'back'];
 
     	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Layout_room> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$6.warn(`<Layout_room> was created with unknown prop '${key}'`);
     	});
 
     	function button0_layout_binding(value) {
@@ -4039,8 +4219,8 @@ var app = (function () {
     		back,
     		msg,
     		text_area,
-    		index,
     		msgs,
+    		index,
     		add_msg,
     		send_msg,
     		send_msg_if
@@ -4051,8 +4231,8 @@ var app = (function () {
     		if ('back' in $$props) $$invalidate(1, back = $$props.back);
     		if ('msg' in $$props) $$invalidate(4, msg = $$props.msg);
     		if ('text_area' in $$props) $$invalidate(2, text_area = $$props.text_area);
-    		if ('index' in $$props) index = $$props.index;
     		if ('msgs' in $$props) $$invalidate(3, msgs = $$props.msgs);
+    		if ('index' in $$props) index = $$props.index;
     	};
 
     	if ($$props && "$$inject" in $$props) {

srcs/requirements/svelte/api_front/src/pieces/chat/Chat_msg.svelte

@@ -1,25 +1,26 @@
 <script>
 
-	export let content;
 	export let name;
 
 </script>
 
 <div class="chat_msg {name}">
 	<p class="name">{name}</p>
-	<p class="msg">{content}</p>
+	<p class="msg"><slot></slot></p>
 </div>
 
 <style>
 	.chat_msg {
+		/*
 		white-space: pre-wrap;
+		*/
 		margin: 5px auto;
 		padding: 5px;
 		border-radius: 5px;
 	}
 	/* all msg
 	*/
-	:global(.msg_thread) .chat_msg {
+	.chat_msg {
 		margin-left: 0px;
 		background-color: rgb(210, 210, 210);
 		max-width: 80%;
@@ -35,6 +36,9 @@
 	.chat_msg p.msg {
 		margin: 5px 0px;
 	}
+	.chat_msg p.msg :global(*) {
+		display: inline;
+	}
 	/* msg perso
 	*/
 	.chat_msg.me {

srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte

@@ -9,8 +9,8 @@
 
 	let msg = "";
 	let text_area;
-	let index = 0;
 	let msgs = [];
+	let index = 0;
 
 	function add_msg(from, the_msg)
 	{
@@ -21,6 +21,7 @@
 	function send_msg()
 	{
 		msg = msg.trim();
+		console.log(msg);
 
 		if (msg.length > 0) {
 			//socket.emit('sendmsg', msg);
@@ -62,14 +63,17 @@
 	<!-- msg -->
 	<div class="panel panel_msg">
 		<div class="msg_thread">
-			{#each msgs as msg}
+			{#each msgs as msg (msg.id)}
-				<Msg name={msg.name} content={msg.content} />
+				<Msg name={msg.name}>{@html msg.content}</Msg>
 			{/each}
 		</div>
 	</div>
 
 	<!-- write -->
 	<div class="panel_write">
+		<!--
+			bind:textContent={msg}
+		-->
 		<div
 			class="text_area"
 			bind:innerHTML={msg}