Make logo and name configurable

Author: HighPriest

src/lib/Chatbox/Header.svelte

@@ -1,12 +1,12 @@
 <!-- Copyright (C) 2025 LiveMatrix -->
 <script lang="ts">
-    // TODO: Make Title and logo loadable from config
+  import { chatConfig } from '$lib/state.svelte';
 </script>
 
 <div class="chat-titlebar">
-<h5>Chat UI</h5>
+<h5>Chat with {chatConfig.metadata.companyName}</h5>
 <div class="chat-avatar">
-    <img src="https://cdn.dribbble.com/users/37530/screenshots/2937858/drib_blink_bot.gif" alt="">
+    <img src="{chatConfig.metadata.companyLogo}" alt="">
 </div>
 </div>
 

src/lib/Chatbox/Session.svelte

@@ -82,8 +82,9 @@
 		}}
 	>
 		<fieldset disabled={isLoading}>
-			<legend>Start a new chat</legend>
-			<p>Please fill in your details to begin.</p>
+			<legend>Welcome to {chatConfig.metadata.companyName}</legend>
+			<p>If you want to inquire about our services or have a chat with our administrators, you are in the right place</p>
+			<p style="font-size:smaller; opacity: 50%;">We ask for extra id, to contact you if we lose communication. <br>The chat is persistent between browser sessions, so you can come back here at any time, to continue our conversation.</p>
 
 			<div class="form-input">
 				<input
@@ -94,7 +95,7 @@
 					bind:value={postData.name}
 					required
 				/>
-				<label for="name">Your Name</label>
+				<label for="name">Your Name*</label>
 			</div>
 
 			<div class="form-input">
@@ -105,7 +106,7 @@
 					placeholder=""
 					bind:value={postData.surname}
 				/>
-				<label for="surname">Phone Number*</label>
+				<label for="surname">Phone Number</label>
 			</div>
 
 			<div class="form-input">
@@ -117,7 +118,7 @@
 					placeholder=""
 					required
 				/>
-				<label for="email">E-mail address</label>
+				<label for="email">E-mail address*</label>
 			</div>
 
 			<button class="button-82-pushable" type="submit" aria-busy={isLoading}>

src/lib/state.svelte.ts

@@ -13,7 +13,11 @@ export type Config = {
         host: string,
         port: number
     },
-    greeting: string
+    greeting: string,
+    metadata: {
+        companyName: string,
+        companyLogo: string,
+    }
 }
 
 export const chatState = $state({

static/livematrix/config.json

@@ -10,6 +10,10 @@
             "host": "localhost", 
             "port": 8000
         },
-        "greeting": "Hello there, thanks for reaching out, i'll answer you asap"
+        "greeting": "Hello there, thanks for reaching out, i'll answer you asap",
+        "metadata": {
+            "companyName": "LiveMatrix",
+            "companyLogo": "/livematrix/logo.png"
+        }
     }
 }