@liip/liipgpt 0.0.8 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/chat/index.html CHANGED
@@ -7,22 +7,38 @@
7
7
  </head>
8
8
  <body>
9
9
  <div id="body">
10
- <div id="sidebar"></div>
10
+ <div id="sidebar">
11
+ <div id="sidebar__top"></div>
12
+ <div id="sidebar__bottom"></div>
13
+ </div>
14
+ <div id="chat-wrapper"></div>
11
15
  </div>
12
16
 
13
17
  <script src="./liipgpt-chat.iife.js"></script>
14
18
  <script>
15
19
  const orgs = ["alva","default","liipgpt"];
16
20
 
17
- const sidebar = document.getElementById('sidebar');
21
+ const sidebarTop = document.getElementById('sidebar__top');
22
+ const sidebarBottom = document.getElementById('sidebar__bottom');
18
23
 
19
24
  orgs.forEach((org) => {
20
25
  const button = document.createElement('button');
21
26
  button.onclick = () => setOrg(org);
22
27
  button.textContent = org;
23
- sidebar.appendChild(button);
28
+ sidebarTop.appendChild(button);
24
29
  });
25
30
 
31
+ // Add layout toggle buttons
32
+ const fullscreenBtn = document.createElement('button');
33
+ fullscreenBtn.textContent = 'Fullscreen';
34
+ fullscreenBtn.onclick = () => document.getElementById('chat-wrapper').classList.remove('box-layout');
35
+ sidebarBottom.appendChild(fullscreenBtn);
36
+
37
+ const boxLayoutBtn = document.createElement('button');
38
+ boxLayoutBtn.textContent = 'Box layout';
39
+ boxLayoutBtn.onclick = () => document.getElementById('chat-wrapper').classList.add('box-layout');
40
+ sidebarBottom.appendChild(boxLayoutBtn);
41
+
26
42
  let chat;
27
43
 
28
44
  function setOrg(org) {
@@ -33,7 +49,7 @@
33
49
  chat.setAttribute('org', org);
34
50
  chat.setAttribute('apiUrl', 'https://liipgpt.api.dev.genai.liip.ch/liipgpt');
35
51
  chat.setAttribute('apiKey', 'X9hL4Gp5W2D7eRtF');
36
- document.getElementById('body').appendChild(chat);
52
+ document.getElementById('chat-wrapper').appendChild(chat);
37
53
 
38
54
  const url = new URL(window.location.href);
39
55
  url.searchParams.set('org', org);
@@ -54,6 +70,7 @@
54
70
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
55
71
  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
56
72
  color: black;
73
+ background-color: #f5f5f5;
57
74
  }
58
75
 
59
76
  #body {
@@ -65,16 +82,26 @@
65
82
  #sidebar {
66
83
  display: flex;
67
84
  flex-direction: column;
85
+ justify-content: space-between;
68
86
  gap: 8px;
69
87
  padding: 16px;
70
88
  background-color: #f5f5f5;
71
89
  border-right: 1px solid #ddd;
72
90
  min-width: 150px;
73
91
  height: 100vh;
92
+ box-sizing: border-box;
74
93
  }
75
94
 
76
- liipgpt-chat {
77
- flex: 1;
95
+ #sidebar__top {
96
+ display: flex;
97
+ flex-direction: column;
98
+ gap: 8px;
99
+ }
100
+
101
+ #sidebar__bottom {
102
+ display: flex;
103
+ flex-direction: column;
104
+ gap: 8px;
78
105
  }
79
106
 
80
107
  #sidebar button {
@@ -89,6 +116,24 @@
89
116
  #sidebar button:hover {
90
117
  background-color: #eee;
91
118
  }
119
+
120
+ #chat-wrapper {
121
+ width: 100cqw;
122
+ height: 100cqh;
123
+ }
124
+
125
+ #chat-wrapper.box-layout {
126
+ width: 450px;
127
+ height: 650px;
128
+ overflow: hidden;
129
+
130
+ position: fixed;
131
+ bottom: 40px;
132
+ right: 40px;
133
+
134
+ border-radius: 10px;
135
+ box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.4);
136
+ }
92
137
  </style>
93
138
  </body>
94
139
  </html>