Multiple model selection working

2024-05-01 17:18:57 +02:00
parent 765ebd3c29
commit 642fd8bb52
24 changed files with 1011 additions and 648 deletions
@@ -6,6 +6,47 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JADE 2.0</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
+
+    <style>
+        body,
+        html {
+            height: 100%;
+            margin: 0;
+        }
+
+        .chat-input-container {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: fixed;
+            bottom: 10px;
+            left: 0;
+            right: 0;
+            padding: 10px;
+        }
+
+        .chat-input-container .field.has-addons {
+            width: 100%;
+            /* Ensure the field container takes full width */
+        }
+
+        .chat-input-container form.control.is-expanded {
+            flex-grow: 1;
+            /* Make the form (input container) grow to fill available space */
+        }
+
+        .image.is-32x32 {
+            width: 32px;
+            height: 32px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            box-sizing: border-box;
+            border-radius: 6px;
+        }
+    </style>
 </head>

 <body>
@@ -29,6 +70,66 @@
        }
    </style>

+    <!-- Style stuff -->
+
+    <style>
+        .message-content {
+            background-color: #303030;
+            border-radius: 5px;
+            padding: 10px;
+        }
+
+        .content {
+            font-size: 14px;
+            line-height: 1.5;
+            color: #ffffff;
+        }
+
+        .content pre {
+            font-family: monospace;
+            background-color: #363636 !important;
+            border-radius: 3px;
+        }
+
+        #chat-messages {
+            max-width: 800px;
+            margin: auto;
+            width: 95%;
+        }
+
+        #chat-input-form {
+            max-width: 900px;
+            margin: auto;
+            width: 98%;
+        }
+
+        :root {
+            --bulma-body-background-color: #202020;
+            --bulma-primary: #126d0f;
+        }
+    </style>
+
+    <!-- Animations stuff -->
+    <style>
+        .message-bot.htmx-added {
+            opacity: 0;
+        }
+
+        .message-bot {
+            opacity: 1;
+            transition: opacity 1s ease-out;
+        }
+
+        .message-user.htmx-added {
+            opacity: 0;
+        }
+
+        .message-user {
+            opacity: 1;
+            transition: opacity 1s ease-out;
+        }
+    </style>
+
 </body>

 </html>