@liip/liipgpt 0.0.13 → 0.0.15

package/chat/index.html

@@ -19,6 +19,7 @@
       const orgs = ["alva","default","liipgpt"];
 
       const sidebarTop = document.getElementById('sidebar__top');
+      const sidebarCenter = document.getElementById('sidebar__center');
       const sidebarBottom = document.getElementById('sidebar__bottom');
 
       orgs.forEach((org) => {
@@ -39,16 +40,44 @@
       boxLayoutBtn.onclick = () => document.getElementById('chat-wrapper').classList.add('box-layout');
       sidebarBottom.appendChild(boxLayoutBtn);
 
+      // Add language toggle buttons
+      const langContainer = document.createElement('div');
+      langContainer.style.display = 'grid';
+      langContainer.style.gridTemplateColumns = 'repeat(2, 1fr)';
+      langContainer.style.gap = '8px';
+
+      const languages = ['en', 'de', 'fr', 'it'];
+      languages.forEach((lang) => {
+        const langLink = document.createElement('a');
+        langLink.classList.add('button');
+        langLink.textContent = lang;
+        langLink.href = '#';
+        langLink.style.textDecoration = 'none';
+        langLink.onclick = (e) => {
+          e.preventDefault();
+          const url = new URL(window.location.href);
+          url.searchParams.set('lang', lang.toLowerCase());
+          window.location.href = url.toString();
+        };
+        langContainer.appendChild(langLink);
+      });
+
+      sidebarBottom.appendChild(langContainer);
+
       let chat;
 
       function setOrg(org) {
         chat?.remove();
 
+        const params = new URLSearchParams(window.location.search);
+        const forceLang = params.get('lang');
+
         chat = document.createElement('liipgpt-chat');
         chat.id = 'chat';
         chat.setAttribute('org', org);
         chat.setAttribute('apiUrl', 'https://liipgpt.api.dev.genai.liip.ch/liipgpt');
         chat.setAttribute('apiKey', 'X9hL4Gp5W2D7eRtF');
+        chat.setAttribute('lang', forceLang);
         document.getElementById('chat-wrapper').appendChild(chat);
 
         const url = new URL(window.location.href);
@@ -90,6 +119,7 @@
         min-width: 150px;
         height: 100vh;
         box-sizing: border-box;
+        font-size: 0.8rem;
       }
 
       #sidebar__top {
@@ -104,7 +134,8 @@
         gap: 8px;
       }
 
-      #sidebar button {
+      #sidebar button,
+      #sidebar .button {
         padding: 8px 16px;
         border: 1px solid #ddd;
         border-radius: 4px;
@@ -112,6 +143,8 @@
         color: black;
         cursor: pointer;
         transition: background-color 0.2s;
+        font-size: inherit;
+        text-align: center;
       }
       #sidebar button:hover {
         background-color: #eee;