From b93b10db8dd458d2ffbf7abd9b9cab2b04bf4a66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9mence=20Lesn=C3=A9?= <clemence@lesne.pro>
Date: Thu, 13 Jul 2023 13:54:40 +0200
Subject: [PATCH] UI: Make index page title two lines

---
 src/conversation-ui/src/Conversation.jsx  | 85 ++++++++++++-----------
 src/conversation-ui/src/conversation.scss | 30 +++++---
 2 files changed, 64 insertions(+), 51 deletions(-)

diff --git a/src/conversation-ui/src/Conversation.jsx b/src/conversation-ui/src/Conversation.jsx
index 72e21db3..6a0c9815 100644
--- a/src/conversation-ui/src/Conversation.jsx
+++ b/src/conversation-ui/src/Conversation.jsx
@@ -264,48 +264,51 @@ function Conversation() {
       <div className="conversation__header">
         {conversationId && <h2>{conversation.title ? conversation.title : "New chat"}</h2>}
       </div>
-      <div className="conversation__messages">
-        {conversation.messages.length == 0 && (
-          <div className="conversation__messages__empty">
-            <big>🔒 Private GPT</big>
-            <div className="conversation__messages__empty__doc">
-              <div>
-                <h2>💡</h2>
-              </div>
-              <div>
-                <h2>Examples</h2>
-                <p>Generating content that is tailored to specific audiences or personas.</p>
-                <p>Help on technical language and jargon in specific industries (such as finance or healthcare).</p>
-              </div>
-              <div>
-                <h2>⚡️</h2>
-              </div>
-              <div>
-                <h2>Capabilities</h2>
-                <p>Analyzing large amounts of qualitative data (such as news articles or earnings calls) to inform investment decisions.</p>
-                <p>Generating summaries of court cases or contracts to save time on manual review.</p>
-              </div>
-              <div>
-                <h2>⚠️</h2>
-              </div>
-              <div>
-                <h2>Limitations</h2>
-                <p>Ensuring that generated content adheres to applicable regulations in a given industry or region.</p>
-                <p>Mitigating any risks associated with automated content creation (such as reputational harm or inadvertent bias).</p>
-              </div>
+      {conversation.messages.length == 0 && (
+        <div className="conversation__empty">
+          <div className="conversation__empty__header">
+            <span>🔒</span>
+            <big>Welcome to Private GPT</big>
+          </div>
+          <div className="conversation__empty__doc">
+            <div>
+              <h2>💡</h2>
+            </div>
+            <div>
+              <h2>Examples</h2>
+              <p>Generating content that is tailored to specific audiences or personas.</p>
+              <p>Help on technical language and jargon in specific industries (such as finance or healthcare).</p>
+            </div>
+            <div>
+              <h2>⚡️</h2>
+            </div>
+            <div>
+              <h2>Capabilities</h2>
+              <p>Analyzing large amounts of qualitative data (such as news articles or earnings calls) to inform investment decisions.</p>
+              <p>Generating summaries of court cases or contracts to save time on manual review.</p>
+            </div>
+            <div>
+              <h2>⚠️</h2>
+            </div>
+            <div>
+              <h2>Limitations</h2>
+              <p>Ensuring that generated content adheres to applicable regulations in a given industry or region.</p>
+              <p>Mitigating any risks associated with automated content creation (such as reputational harm or inadvertent bias).</p>
             </div>
-            {!auth.userData && (
-              <Button
-                active={true}
-                emoji="🔑"
-                large={true}
-                loading={auth.isLoading}
-                onClick={() => auth.signIn()}
-                text="Signin"
-              />
-            )}
           </div>
-        )}
+          {!auth.userData && (
+            <Button
+              active={true}
+              emoji="🔑"
+              large={true}
+              loading={auth.isLoading}
+              onClick={() => auth.signIn()}
+              text="Signin"
+            />
+          )}
+        </div>
+      )}
+      {conversation.messages.length > 0 && <div className="conversation__messages">
         {conversation.messages.map((message) => (
           <Message
             content={message.content}
@@ -317,7 +320,7 @@ function Conversation() {
             secret={message.secret}
           />
         ))}
-      </div>
+      </div>}
       {auth.userData && (
         <form
           className="conversation__input"
diff --git a/src/conversation-ui/src/conversation.scss b/src/conversation-ui/src/conversation.scss
index 50ed9841..12942a2e 100644
--- a/src/conversation-ui/src/conversation.scss
+++ b/src/conversation-ui/src/conversation.scss
@@ -15,15 +15,15 @@
     padding: var(--conversation-padding-v) 0;
 
     // Stays at the top
-    top: 0;
     position: sticky;
+    top: 0;
     z-index: 900;
 
     > h2 {
       // Disable line wrapping
-      white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 
@@ -36,22 +36,32 @@
     > *:not(:last-child) {
       margin-bottom: var(--conversation-padding-v);
     }
+  }
+
+  .conversation__empty {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: center;
+
+    > *:not(:last-child) {
+      margin-bottom: calc(var(--conversation-padding-v) * 2);
+    }
 
-    .conversation__messages__empty {
+    .conversation__empty__header {
       align-items: center;
       display: flex;
       flex-direction: column;
+      text-align: center;
 
-      // Center the content vertically and horizontally
-      align-self: center;
-      margin: auto 0;
-
-      > *:not(:last-child) {
-        margin-bottom: 1em;
+      > span {
+        font-size: 800%;
+        line-height: 1;
       }
     }
 
-    .conversation__messages__empty__doc {
+    .conversation__empty__doc {
       background-color: var(--background-muted);
       border-radius: var(--radius);
       display: grid;