From 96cc2adc91e4c57269ddddf7ddd3c9a1b74fcbd2 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Mon, 28 Oct 2024 16:46:00 -0700
Subject: [PATCH] Fix Wave AI styling again (#1164)

---
 frontend/app/view/waveai/waveai.less | 148 +++++++++++++--------------
 frontend/app/view/waveai/waveai.tsx  |   4 +-
 2 files changed, 77 insertions(+), 75 deletions(-)

diff --git a/frontend/app/view/waveai/waveai.less b/frontend/app/view/waveai/waveai.less
index 4c8d9907b..c35a5e24e 100644
--- a/frontend/app/view/waveai/waveai.less
+++ b/frontend/app/view/waveai/waveai.less
@@ -8,97 +8,97 @@
     height: 100%;
     width: 100%;
 
-    > .scrollable {
-        flex-flow: column nowrap;
+    .waveai-chat {
         flex-grow: 1;
-        margin-bottom: 0;
-        overflow-y: auto;
-        min-height: 100%;
-
-        .chat-window {
-            display: flex;
-            // margin-bottom: 5px;
-            flex-direction: column;
+        > .scrollable {
+            flex-flow: column nowrap;
+            margin-bottom: 0;
+            overflow-y: auto;
             min-height: 100%;
-            gap: 8px;
 
-            // This is the filler that will push the chat messages to the bottom until the chat window is full
-            .filler {
-                flex: 1 1 auto;
-            }
-        }
-
-        .chat-msg-container {
-            display: flex;
-            gap: 8px;
-            .chat-msg {
-                margin: 10px 0;
+            .chat-window {
                 display: flex;
-                align-items: flex-start;
-                border-radius: 8px;
+                flex-direction: column;
+                gap: 8px;
 
-                &.chat-msg-header {
+                // This is the filler that will push the chat messages to the bottom until the chat window is full
+                .filler {
+                    flex: 1 1 auto;
+                }
+            }
+
+            .chat-msg-container {
+                display: flex;
+                gap: 8px;
+                .chat-msg {
+                    margin: 10px 0;
                     display: flex;
-                    flex-direction: column;
-                    justify-content: flex-start;
+                    align-items: flex-start;
+                    border-radius: 8px;
 
-                    .icon-box {
-                        padding-top: 0;
-                        border-radius: 4px;
-                        background-color: rgb(from var(--highlight-bg-color) r g b / 0.05);
+                    &.chat-msg-header {
                         display: flex;
-                        padding: 6px;
-                    }
-                }
+                        flex-direction: column;
+                        justify-content: flex-start;
 
-                &.chat-msg-assistant {
-                    color: var(--main-text-color);
-                    background-color: rgb(from var(--highlight-bg-color) r g b / 0.1);
-                    margin-right: auto;
-                    padding: 10px;
-                    max-width: 85%;
-
-                    .markdown {
-                        width: 100%;
-
-                        pre {
-                            white-space: pre-wrap;
-                            word-break: break-word;
-                            max-width: 100%;
-                            overflow-x: auto;
-                            margin-left: 0;
+                        .icon-box {
+                            padding-top: 0;
+                            border-radius: 4px;
+                            background-color: rgb(from var(--highlight-bg-color) r g b / 0.05);
+                            display: flex;
+                            padding: 6px;
                         }
                     }
-                }
-                &.chat-msg-user {
-                    margin-left: auto;
-                    padding: 10px;
-                    max-width: 85%;
-                    background-color: rgb(from var(--accent-color) r g b / 0.15);
-                }
 
-                &.chat-msg-error {
-                    color: var(--main-text-color);
-                    background-color: rgb(from var(--error-color) r g b / 0.25);
-                    margin-right: auto;
-                    padding: 10px;
-                    max-width: 85%;
+                    &.chat-msg-assistant {
+                        color: var(--main-text-color);
+                        background-color: rgb(from var(--highlight-bg-color) r g b / 0.1);
+                        margin-right: auto;
+                        padding: 10px;
+                        max-width: 85%;
 
-                    .markdown {
-                        width: 100%;
+                        .markdown {
+                            width: 100%;
 
-                        pre {
-                            white-space: pre-wrap;
-                            word-break: break-word;
-                            max-width: 100%;
-                            overflow-x: auto;
-                            margin-left: 0;
+                            pre {
+                                white-space: pre-wrap;
+                                word-break: break-word;
+                                max-width: 100%;
+                                overflow-x: auto;
+                                margin-left: 0;
+                            }
                         }
                     }
-                }
+                    &.chat-msg-user {
+                        margin-left: auto;
+                        padding: 10px;
+                        max-width: 85%;
+                        background-color: rgb(from var(--accent-color) r g b / 0.15);
+                    }
 
-                &.typing-indicator {
-                    margin-top: 4px;
+                    &.chat-msg-error {
+                        color: var(--main-text-color);
+                        background-color: rgb(from var(--error-color) r g b / 0.25);
+                        margin-right: auto;
+                        padding: 10px;
+                        max-width: 85%;
+
+                        .markdown {
+                            width: 100%;
+
+                            pre {
+                                white-space: pre-wrap;
+                                word-break: break-word;
+                                max-width: 100%;
+                                overflow-x: auto;
+                                margin-left: 0;
+                            }
+                        }
+                    }
+
+                    &.typing-indicator {
+                        margin-top: 4px;
+                    }
                 }
             }
         }
diff --git a/frontend/app/view/waveai/waveai.tsx b/frontend/app/view/waveai/waveai.tsx
index bb4741795..3f66870ce 100644
--- a/frontend/app/view/waveai/waveai.tsx
+++ b/frontend/app/view/waveai/waveai.tsx
@@ -722,7 +722,9 @@ const WaveAi = ({ model }: { model: WaveAiModel; blockId: string }) => {
 
     return (
         <div ref={waveaiRef} className="waveai">
-            <ChatWindow ref={osRef} chatWindowRef={chatWindowRef} messages={messages} msgWidths={msgWidths} />
+            <div className="waveai-chat">
+                <ChatWindow ref={osRef} chatWindowRef={chatWindowRef} messages={messages} msgWidths={msgWidths} />
+            </div>
             <div className="waveai-controls">
                 <div className="waveai-input-wrapper">
                     <ChatInput