Remove deprecated scripts for adding head-matter to wt_config.xml, including Python and Bash implementations, to streamline configuration management.

client/src/components/ChatWindow.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="chat-window">
+    <div v-if="!chatStore.currentConversation" class="no-conversation">
+      <p>Wähle einen Benutzer aus der Liste aus, um eine Unterhaltung zu starten.</p>
+    </div>
+    
+    <div v-else class="messages-container">
+      <div
+        v-for="(message, index) in chatStore.messages"
+        :key="index"
+        :class="['output-box-format', message.self ? 'ouput-box-format-self' : 'output-box-format-other']"
+        :title="formatTime(message.timestamp)"
+      >
+        <strong>{{ message.from }}:</strong>
+        <span v-if="message.isImage" class="image-message">
+          <img 
+            :src="message.message" 
+            :alt="'Bild von ' + message.from" 
+            class="chat-image" 
+            @click="openImageModal(message.message)"
+          />
+        </span>
+        <span v-else v-html="replaceSmileys(message.message)"></span>
+      
+      <!-- Bild-Modal -->
+      <div v-if="selectedImage" class="image-modal-overlay" @click="closeImageModal">
+        <div class="image-modal-content" @click.stop>
+          <button class="image-modal-close" @click="closeImageModal" title="Schließen">×</button>
+          <img :src="selectedImage" alt="Vergrößertes Bild" class="image-modal-image" />
+        </div>
+      </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useChatStore } from '../stores/chat';
+
+const chatStore = useChatStore();
+const selectedImage = ref(null);
+
+function openImageModal(imageSrc) {
+  selectedImage.value = imageSrc;
+}
+
+function closeImageModal() {
+  selectedImage.value = null;
+}
+
+// Smiley-Definitionen (wie im Original)
+const smileys = {
+  ':)': { code: '1F642' },
+  ':D': { code: '1F600' },
+  ':(': { code: '1F641' },
+  ';)': { code: '1F609' },
+  ':p': { code: '1F60B' },
+  ';p': { code: '1F61C' },
+  'O)': { code: '1F607' },
+  ':*': { code: '1F617' },
+  '(h)': { code: '1FA77' },
+  'xD': { code: '1F602' },
+  ':@': { code: '1F635' },
+  ':O': { code: '1F632' },
+  ':3': { code: '1F63A' },
+  ':|': { code: '1F610' },
+  ':/': { code: '1FAE4' },
+  ':#': { code: '1F912' },
+  '#)': { code: '1F973' },
+  '%)': { code: '1F974' },
+  '(t)': { code: '1F44D' },
+  ":'(": { code: '1F622' }
+};
+
+function replaceSmileys(text) {
+  if (!text) return '';
+  
+  // HTML-Sonderzeichen escapen
+  let outputText = text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+  
+  // Smileys ersetzen (längere Codes zuerst, um Überschneidungen zu vermeiden)
+  const sortedCodes = Object.keys(smileys).sort((a, b) => b.length - a.length);
+  
+  for (const code of sortedCodes) {
+    const regex = new RegExp(escapeRegex(code), 'g');
+    outputText = outputText.replace(regex, `&#x${smileys[code].code};`);
+  }
+  
+  return outputText;
+}
+
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function formatTime(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+}
+</script>
+
+<style scoped>
+.no-conversation {
+  padding: 20px;
+  text-align: center;
+  color: #666;
+}
+
+.messages-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-image {
+  max-width: 200px;
+  max-height: 200px;
+  border-radius: 4px;
+  margin-top: 0.5em;
+  display: block;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.chat-image:hover {
+  opacity: 0.8;
+}
+
+.image-message {
+  display: block;
+}
+
+.image-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.image-modal-content {
+  position: relative;
+  width: 80%;
+  height: 80%;
+  background-color: #fff;
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.image-modal-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  font-size: 28px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1001;
+  transition: background-color 0.2s;
+}
+
+.image-modal-close:hover {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.image-modal-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+}
+</style>
+