ai: ChatGPT-style like.

assets/css/chat/bubble.css

@@ -20,7 +20,7 @@
   overflow-wrap: break-word;
   word-break: break-word;
   vertical-align: middle;
-  padding: 1rem 1.25rem;
+  padding: 1rem 1rem;
   box-sizing: border-box;
   max-width: 100%;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -42,13 +42,15 @@
 
 .bubble-user {
   align-self: flex-end;
-  background: linear-gradient(135deg, var(--color-primary), #2563eb);
+  background: #2b2b2b;
   color: #fff;
   border-bottom-right-radius: 0.5rem;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
+  box-shadow: none;
 }
 
 .bubble-assist {
   align-self: flex-start;
-  background: linear-gradient(135deg, #1f1f1f, #1a1a1a);
+  background: transparent;
+  border: none;
+  box-shadow: none;
 }

assets/css/chat/markdown.css

@@ -66,13 +66,8 @@
   max-width: 200px;
 }
 
-.md-content th {
-  background: rgba(255, 255, 255, 0.1);
-  font-weight: 600;
-}
-
-.md-content tbody tr:nth-child(odd) td {
-  background: rgba(255, 255, 255, 0.05);
+.md-content th, tbody tr:nth-child(odd) td {
+  background: rgba(0, 0, 0, 0.3);
 }
 
 .md-content ul {
@@ -119,7 +114,6 @@
   left: 1em;
   top: 0;
   font-size: 1.2em;
-  color: var(--color-primary);
 }
 
 .md-content ol > li {
@@ -134,14 +128,13 @@
   min-width: 2.5em;
   text-align: right;
   padding-right: 0.5em;
-  color: var(--color-primary);
   font-weight: 500;
 }
 
 .md-content hr {
   border: 0;
   height: 2px;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  background: #ffffff;
   margin: 1.2rem 0;
   border-radius: 2px;
 }
@@ -166,6 +159,6 @@
 }
 
 .md-content table td pre, .md-content table th pre {
-  max-height: 360px;
+  max-width: 480px;
   overflow: auto;
 }

assets/css/chat/style.css

@@ -49,7 +49,7 @@
   width: 100%;
   height: 100%;
   overflow-y: auto;
-  padding: 0.75rem 1rem calc(var(--footer-height) + 1rem) 1rem;
+  padding: 0.75rem 0.75rem calc(var(--footer-height) + 1rem) 1rem;
   box-sizing: border-box;
   max-width: 100%;
   overflow-wrap: break-word;

assets/css/footer.css

@@ -12,10 +12,10 @@
   max-width: 100%;
   box-sizing: border-box;
   position: fixed;
-  bottom: 0;
+  bottom: 5rem;
   left: 0;
   right: 0;
   z-index: 1000;
   animation: slideInUp 0.3s ease-out forwards;
-  height: var(--footer-height);
+  height: 0;
 }

assets/css/icon.css

@@ -49,7 +49,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 1rem;
+  padding: 0.2rem;
   color: #9ca3af;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -64,7 +64,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 0.5rem;
+  padding: 0.2rem;
   gap: 0.5rem;
 }
 

assets/css/input.css

@@ -25,7 +25,7 @@
 
 #userInput {
   flex: 1;
-  padding: 0.75rem 1rem;
+  padding: 0.75rem 0.75rem;
   border-radius: 2rem;
   border: 1px solid transparent;
   background-color: transparent;

assets/css/style.css

@@ -81,8 +81,9 @@ main {
 
 .system {
   text-align: center;
-  margin-top: 1.5rem;
-  font-size: 0.8rem;
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+  font-size: 0.7rem;
   color: #9ca3af;
   word-break: break-word;
   overflow-wrap: break-word;

src/frontend/loader.html

@@ -272,7 +272,7 @@
                         </div>
                     </div>
 
-                    <p class="system mt-4 text-sm text-gray-400"
+                    <p class="system"
                        style="word-wrap:break-word;">
                         Demo only!
                         <a href="https://umint-openwebui.hf.space"