WIP: input area

ChuanhuChatbot.py

@@ -117,37 +117,46 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                         label="Chuanhu Chat", 
                         elem_id="chuanhu-chatbot", 
                         latex_delimiters=latex_delimiters_set, 
-                        height=700, 
+                        # height=700, 
                         show_label=False,
                         avatar_images=[config.user_avatar, config.bot_avatar], 
-                        show_share_button=False
+                        show_share_button=False,
                     )
-                with gr.Row():
-                    with gr.Column(min_width=225, scale=12):
-                        user_input = gr.Textbox(
-                            elem_id="user-input-tb",
-                            show_label=False, placeholder=i18n("在这里输入"),
-                            container=False
-                        )
-                    with gr.Column(min_width=42, scale=1):
-                        submitBtn = gr.Button(value="", variant="primary", elem_id="submit-btn")
-                        cancelBtn = gr.Button(value="", variant="secondary", visible=False, elem_id="cancel-btn")
-                with gr.Row(elem_id="chatbot-buttons"):
-                    with gr.Column(min_width=120, scale=1):
-                        emptyBtn = gr.Button(
-                            i18n("🧹 新的对话"), elem_id="empty-btn"
-                        )
-                    with gr.Column(min_width=120, scale=1):
-                        retryBtn = gr.Button(i18n("🔄 重新生成"))
-                    with gr.Column(min_width=120, scale=1):
-                        delFirstBtn = gr.Button(i18n("🗑️ 删除最旧对话"))
-                    with gr.Column(min_width=120, scale=1):
-                        delLastBtn = gr.Button(i18n("🗑️ 删除最新对话"))
-                    with gr.Row(visible=False) as like_dislike_area:
-                        with gr.Column(min_width=20, scale=1):
-                            likeBtn = gr.Button(i18n("👍"))
-                        with gr.Column(min_width=20, scale=1):
-                            dislikeBtn = gr.Button(i18n("👎"))
+                with gr.Row(elem_id="chatbot-footer"):
+                    with gr.Box(elem_id="chatbot-input-box"):
+                        with gr.Row(elem_id="chatbot-input-btn-bar"):
+                            gr.Button(i18n("📄 上传文档"), variant="secondary", elem_id="upload-doc-btn", elem_classes="chatbot-input-button", scale=0)
+                            gr.Button(i18n("📄 xxx"), variant="secondary", elem_id="upload-index-btn", elem_classes="chatbot-input-button", scale=0)
+                            gr.Button(i18n("📄 xxx"), variant="secondary", elem_id="uplasdfasdfoad-qa-btn", elem_classes="chatbot-input-button", scale=0)
+                        with gr.Row(elem_id="chatbot-input-tb-row"):
+                            with gr.Column(min_width=225, scale=12):
+                                user_input = gr.Textbox(
+                                    elem_id="user-input-tb",
+                                    show_label=False, 
+                                    placeholder=i18n("在这里输入"),
+                                    elem_classes="no-container",
+                                    max_lines=5,
+                                    # container=False
+                                )
+                            with gr.Column(min_width=42, scale=1, elem_id="chatbot-ctrl-btns"):
+                                submitBtn = gr.Button(value="", variant="primary", elem_id="submit-btn")
+                                cancelBtn = gr.Button(value="", variant="secondary", visible=False, elem_id="cancel-btn")
+                        with gr.Row(elem_id="chatbot-buttons", visible=False):
+                            with gr.Column(min_width=120, scale=1):
+                                emptyBtn = gr.Button(
+                                    i18n("🧹 新的对话"), elem_id="empty-btn"
+                                )
+                            with gr.Column(min_width=120, scale=1):
+                                retryBtn = gr.Button(i18n("🔄 重新生成"))
+                            with gr.Column(min_width=120, scale=1):
+                                delFirstBtn = gr.Button(i18n("🗑️ 删除最旧对话"))
+                            with gr.Column(min_width=120, scale=1):
+                                delLastBtn = gr.Button(i18n("🗑️ 删除最新对话"))
+                            with gr.Row(visible=False) as like_dislike_area:
+                                with gr.Column(min_width=20, scale=1):
+                                    likeBtn = gr.Button(i18n("👍"))
+                                with gr.Column(min_width=20, scale=1):
+                                    dislikeBtn = gr.Button(i18n("👎"))
 
         with gr.Column(elem_id="toolbox-area", scale=1):
             with gr.Box(elem_id="chuanhu-toolbox"): # For CSS setting, there is an extra box. Don't remove it.

web_assets/javascript/ChuanhuChat.js

@@ -278,6 +278,7 @@ function setPopupBoxPosition() {
 }
 
 function setChatbotHeight() {
+    return;
     const screenWidth = window.innerWidth;
     const statusDisplay = document.querySelector('#status-display');
     const statusDisplayHeight = statusDisplay ? statusDisplay.offsetHeight : 0;

web_assets/stylesheet/ChuanhuChat.css

@@ -10,8 +10,8 @@
     --switch-checkbox-color-light: #e5e7eb;
     --switch-checkbox-color-dark: #515151;
 
-    --chatbot-header-background-color-light: #F3F3F3bb;
-    --chatbot-header-background-color-dark: #121111bb;
+    --chatbot-blur-background-color: #F3F3F388;
+    /* --chatbot-blur-background-color-dark: #121111bb; */
     /* --menu-background-color-light: #F0F0F0;
     --menu-background-color-dark: #282828; */
 
@@ -20,6 +20,9 @@
 
     --toolbox-width: 280px;
     --toolbox-background-fill: var(--background-fill-secondary);
+    .dark {
+        --chatbot-blur-background-color: #12111188;
+    }
 }
 
 
@@ -118,9 +121,11 @@ body.popup-open {
     color: var(--body-text-color-subdued);
 }
 
-
+#chatbot-ctrl-btns {
+    align-self: end;
+}
 #submit-btn, #cancel-btn {
-    height: 40px !important;
+    height: 42px !important;
 }
 #submit-btn::before {
     content: url("data:image/svg+xml, %3Csvg width='21px' height='20px' viewBox='0 0 21 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='page' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='send' transform='translate(0.435849, 0.088463)' fill='%23FFFFFF' fill-rule='nonzero'%3E %3Cpath d='M0.579148261,0.0428666046 C0.301105539,-0.0961547561 -0.036517765,0.122307382 0.0032026237,0.420210298 L1.4927172,18.1553639 C1.5125774,18.4334066 1.79062012,18.5922882 2.04880264,18.4929872 L8.24518329,15.8913017 L11.6412765,19.7441794 C11.8597387,19.9825018 12.2370824,19.8832008 12.3165231,19.5852979 L13.9450591,13.4882182 L19.7839562,11.0255541 C20.0619989,10.8865327 20.0818591,10.4694687 19.7839562,10.3105871 L0.579148261,0.0428666046 Z M11.6138902,17.0883151 L9.85385903,14.7195502 L0.718169621,0.618812241 L12.69945,12.9346347 L11.6138902,17.0883151 Z' id='shape'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
@@ -212,7 +217,7 @@ body.popup-open {
     /* padding: 6px 64px; */
     height: 65px;
     background: var(--background-fill-primary);
-    border-bottom: 0.5px solid var(--border-color-primary);
+    border-bottom: 1px solid var(--border-color-primary);
 
     @media screen and (max-width: 639px) {
         padding: 6px 16px;
@@ -257,25 +262,24 @@ body.popup-open {
     background: var(--chatbot-background-color-dark);
 }
 /* #chatbot-area {
-    max-width: 1024px; */
-    /* gap: 0;
+    justify-content: center;
+    display: flex;
 } */
 #chatbot-header {
     justify-content: space-between;
-    border-bottom: 1px solid var(--border-color-primary);
+    border-bottom: 0.5px solid var(--border-color-primary);
     height: 60px;
     padding-inline: 20px;
     gap: 0;
     position: absolute;
     top: 0;
+    right: 4px;
+    width: calc(100% - 4px);
     z-index: 50;
-    background: var(--chatbot-header-background-color-light);
+    background: var(--chatbot-blur-background-color);
     backdrop-filter: blur(24px);
     -webkit-backdrop-filter: blur(24px);
 }
-.dark #chatbot-header {
-    background: var(--chatbot-header-background-color-dark);
-}
 
 #chatbot-header .gradio-dropdown {
     max-width: 14em;
@@ -346,6 +350,37 @@ body.popup-open {
     display: block;
 }
 
+#chatbot-footer {
+    position: absolute;
+    bottom: 0;
+    right: 4px;
+    width: calc(100% - 4px);
+    display: flex;
+    justify-content: center;
+    /* padding: 24px; */
+    padding: 8px 6px;
+    min-height: 120px;
+    max-height: 210px;
+    background: var(--chatbot-blur-background-color);
+    -webkit-backdrop-filter: blur(24px);
+    backdrop-filter: blur(24px);
+}
+
+#chatbot-input-box {
+    max-width: 1024px;
+    /* margin: 0 auto; */
+    gap: 20px;
+    display: flex;
+    background: none;
+    align-self: end;
+}
+
+#chatbot-input-btn-bar {
+    height: 27px;
+    overflow-y: auto;
+    flex-wrap: nowrap;
+}
+
 /* default invisible */
 #menu-area, #toolbox-area {
     width: 0;

web_assets/stylesheet/chatbot.css

@@ -55,6 +55,16 @@ hr.append-display {
     border: none !important;
 }
 
+#user-input-tb {
+    padding: 0 !important;
+    border: 1px solid rgba(167, 167, 167, 0.5) !important;
+    border-radius: 21px !important;
+}
+#user-input-tb textarea {
+    /* max-height: 110px; */
+    background: transparent;
+}
+
 /* 亮色（默认） */
 #chuanhu-chatbot {
     background-color: var(--chatbot-background-color-light) !important;
@@ -107,21 +117,21 @@ hr.append-display {
 /* 屏幕宽度大于等于500px的设备 */
 /* update on 2023.4.8: 高度的细致调整已写入JavaScript */
 @media screen and (min-width: 500px) {
-    #chuanhu-chatbot {
+    /* #chuanhu-chatbot {
         height: calc(100vh - 200px);
     }
     #chuanhu-chatbot>.wrapper>.wrap {
         max-height: calc(100vh - 200px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
-    }
+    } */
 }
 /* 屏幕宽度小于500px的设备 */
 @media screen and (max-width: 499px) {
-    #chuanhu-chatbot {
+    /* #chuanhu-chatbot {
         height: calc(100vh - 140px);
     }
     #chuanhu-chatbot>.wrapper>.wrap {
         max-height: calc(100vh - 140px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
-    }
+    } */
     [data-testid = "bot"] {
         max-width: calc(100% - 84px) !important;
     }
@@ -136,6 +146,10 @@ hr.append-display {
     }
 }
 
+#chuanhu-chatbot {
+    height: calc(100vh - 65px) !important;
+    border-radius: 0;
+}
 #chuanhu-chatbot>.wrapper>.wrap {
     overflow-x: hidden;
     display: flex;
@@ -143,6 +157,7 @@ hr.append-display {
     flex-direction: column;
     padding-inline: 20px;
     padding-top: 72px;
+    padding-bottom: 220px;
 }
 #chuanhu-chatbot>.wrapper>.wrap .message-wrap {
     align-self: center;

web_assets/stylesheet/override-gradio.css

@@ -75,3 +75,35 @@ input[type=range]::-webkit-slider-runnable-track {
     border: none;
     background: transparent;
 }
+
+
+#chuanhu-chatbot>.wrapper>.wrap::-webkit-scrollbar {
+    height: 1rem;
+    width: 4px;
+}
+
+#chuanhu-chatbot>.wrapper>.wrap::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius:9999px
+}
+
+#chuanhu-chatbot>.wrapper>.wrap::-webkit-scrollbar-thumb {
+    background-color: rgba(231, 231, 231, 0.8);
+    /* border-color: rgba(255, 255, 255, var(--tw-border-opacity)); */
+    border: none;
+    border-radius: 9999px;
+    /* border-width:1px */
+}
+
+#chuanhu-chatbot>.wrapper>.wrap::-webkit-scrollbar-thumb:hover {
+    --tw-bg-opacity: 1;
+    background-color:rgb(195, 195, 195);
+}
+
+.dark #chuanhu-chatbot>.wrapper>.wrap::-webkit-scrollbar-thumb {
+    background-color: rgba(56, 56, 56, 0.5);
+}
+
+.dark #chuanhu-chatbot>.wrapper>.wrap::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(56, 56, 56, 0.8);
+}