WIP: make chat with more buttons...

ChuanhuChatbot.py

@@ -124,24 +124,26 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                     )
                 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.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-row"):
+                            gr.HTML(get_html("chatbot_more.html"))
+                            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): # Note: Buttons below are set invisible in UI. But they are used in JS.
                             with gr.Column(min_width=120, scale=1):
                                 emptyBtn = gr.Button(
                                     i18n("🧹 新的对话"), elem_id="empty-btn"

web_assets/html/chatbot_more.html

@@ -0,0 +1,62 @@
+<div>
+    <div id="chatbot-input-more-area">
+        <div class="switch-checkbox">
+            <label>
+                <input type="checkbox" name="single-session-cb" data-testid="checkbox" style="transform: scale(0.8); margin: 0;">
+                <span class="chatbot-input-more-span">单轮对话</span>
+            </label>
+        </div>
+        <div class="switch-checkbox">
+            <label>
+                <input type="checkbox" name="online-search-cb" data-testid="checkbox" style="transform: scale(0.8); margin: 0;">
+                <span class="chatbot-input-more-span">在线搜索</span>
+            </label>
+        </div>
+        <div>
+            <label>
+                <button>
+                    <span>上传文件</span>
+                    <span class="chatbot-input-more-icon">
+                        <svg width="17.6625708px" height="22px" viewBox="0 0 17.6625708 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                                <g fill="currentColor" fill-rule="nonzero">
+                                    <path d="M10.6020285,2.51882667 C11.4362625,2.51882667 11.8921676,2.64807396 12.4438001,3.21682942 L16.9677143,7.80362991 C17.5473088,8.39718377 17.6625708,8.80801259 17.6625708,9.74013504 L17.6625708,17.0701838 C17.6625708,18.6697194 16.8588053,19.4835978 15.2701606,19.4835978 L9.30367012,19.4838726 C9.50801444,19.132339 9.67081559,18.754537 9.78494219,18.3575337 L15.2149282,18.3578162 C16.0814028,18.3578162 16.5329428,17.8954285 16.5329428,17.0499579 L16.5329428,9.75491554 L11.9107944,9.75491554 C10.9798389,9.75491554 10.4963609,9.29343541 10.4963609,8.34048196 L10.4963609,3.64458667 L6.87556994,3.64458667 C6.00213732,3.64458667 5.55375219,4.12267974 5.55375219,4.95246234 L5.55332282,12.0499339 C5.36755588,12.0285691 5.17882362,12.0175857 4.9877281,12.0175857 C4.79846417,12.0175857 4.61149369,12.028399 4.42740668,12.0494356 L4.42797059,4.93219317 C4.42797059,3.3327051 5.23415624,2.51882667 6.81337946,2.51882667 Z M11.552216,3.86783276 L11.552216,8.21151991 C11.552216,8.55164434 11.6926308,8.69205911 12.0359101,8.69205911 L16.3097226,8.69205911 L11.552216,3.86783276 Z" fill-opacity="0.85"></path>
+                                    <path d="M4.9877281,13.0174305 C7.17286548,13.0174305 8.97241326,14.8169783 8.97241326,17.0052706 C8.97241326,19.1904512 7.15190483,20.9970003 4.9877281,20.9970003 C2.80254317,20.9970003 0.999853452,19.1974525 0.999853452,17.0052706 C0.999853452,14.82009 2.80254317,13.0174305 4.9877281,13.0174305 Z M4.99784107,14.437007 C4.88115289,14.437007 4.7753124,14.4852382 4.64150995,14.6120393 L2.60482154,16.530609 C2.48641329,16.6350666 2.4357663,16.7447535 2.42877798,16.8911323 C2.414797,17.1440431 2.62022006,17.325342 2.87314384,17.325342 C3.00310422,17.3323433 3.12991834,17.2638862 3.21236934,17.1782716 L3.90166369,16.4757224 L4.5558954,15.8144894 L4.51466558,16.8528413 L4.51466558,19.0792085 C4.51466558,19.332854 4.73408257,19.5421148 4.99784107,19.5421148 C5.25844467,19.5421148 5.47470676,19.332854 5.47470676,19.0792085 L5.47470676,16.8528413 L5.44363313,15.8144894 L6.08075058,16.4757224 L6.78018815,17.1782716 C6.86960587,17.2638862 6.98560256,17.3183839 7.11555862,17.325342 C7.36531454,17.3393445 7.56061597,17.1440431 7.56061597,16.8911323 C7.56061597,16.7479084 7.50996466,16.6350666 7.39159099,16.530609 L5.34090431,14.6120393 C5.22352465,14.498506 5.12779713,14.437007 4.99784107,14.437007 Z" fill-opacity="0.85"></path>
+                                </g>
+                            </g>
+                        </svg>
+                    </span>
+                </button>
+            </label>
+        </div>
+    </div>
+
+    <!-- get more button -->
+    <div>
+        <button class="chatbot-input-more-btn">
+            <!-- <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink">
+                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <g fill="currentColor" fill-rule="nonzero">
+                        <path
+                            d="M15.9930223,31.97976 C24.7467023,31.97976 32,24.7418401 32,15.98988 C32,7.23796297 24.7327468,0 15.9790668,0 C7.23313125,0 0,7.23796297 0,15.98988 C0,24.7418401 7.24706085,31.97976 15.9930223,31.97976 Z"
+                            fill-opacity="0.1" class="sm-round-bg"></path>
+                        <path
+                            d="M8.41162523,16.0038327 C8.41162523,15.2803594 8.92769229,14.7720332 9.65130778,14.7720332 L14.7951802,14.7720332 L14.7951802,9.62925761 C14.7951802,8.91198549 15.2756953,8.40371964 15.9728644,8.40371964 C16.6964799,8.40371964 17.2048198,8.90578429 17.2048198,9.62925761 L17.2048198,14.7720332 L22.3626477,14.7720332 C23.0723077,14.7720332 23.5884006,15.2803594 23.5884006,16.0038327 C23.5884006,16.7008648 23.0660191,17.1952382 22.3626477,17.1952382 L17.2048198,17.1952382 L17.2048198,22.3380138 C17.2048198,23.0614872 16.6964799,23.563526 15.9728644,23.563526 C15.2756953,23.563526 14.7951802,23.0413333 14.7951802,22.3380138 L14.7951802,17.1952382 L9.65130778,17.1952382 C8.93398085,17.1952382 8.41162523,16.7008648 8.41162523,16.0038327 Z"
+                            fill-opacity="0.85"></path>
+                    </g>
+                </g>
+            </svg> -->
+            <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <g fill="currentColor" fill-rule="nonzero">
+                        <path d="M15.9930223,31.97976 C24.7467023,31.97976 32,24.7418401 32,15.98988 C32,7.23796297 24.7327468,0 15.9790668,0 C7.23313125,0 0,7.23796297 0,15.98988 C0,24.7418401 7.24706085,31.97976 15.9930223,31.97976 Z" fill-opacity="0.1" class="sm-round-bg"></path>
+                        <path d="M23.5318035,18.2475474 C22.2777951,18.2475474 21.2612876,17.2374408 21.2612876,15.9773915 C21.2612876,14.7173421 22.2777951,13.7072355 23.5318035,13.7072355 C24.7781451,13.7072355 25.8086942,14.7173421 25.8086942,15.9773915 C25.8086942,17.2374408 24.7781451,18.2475474 23.5318035,18.2475474 Z" fill-opacity="0.75"></path>
+                        <path d="M15.9930223,18.2475474 C14.7327253,18.2475474 13.7224202,17.2374408 13.7224202,15.9773915 C13.7224202,14.7173421 14.7327253,13.7072355 15.9930223,13.7072355 C17.2533193,13.7072355 18.2775798,14.7173421 18.2775798,15.9773915 C18.2775798,17.2374408 17.2533193,18.2475474 15.9930223,18.2475474 Z" fill-opacity="0.75"></path>
+                        <path d="M8.468162,18.2475474 C7.22182045,18.2475474 6.19131446,17.2374408 6.19131446,15.9773915 C6.19131446,14.7173421 7.22182045,13.7072355 8.468162,13.7072355 C9.70824943,13.7072355 10.7387124,14.7173421 10.7387124,15.9773915 C10.7387124,17.2374408 9.72220487,18.2475474 8.468162,18.2475474 Z" fill-opacity="0.75"></path>
+                    </g>
+                </g>
+            </svg>
+        </button>
+    </div>
+</div>

web_assets/stylesheet/ChuanhuChat.css

@@ -13,14 +13,19 @@
     --switch-checkbox-color-dark: #515151;
 
     --chatbot-blur-background-color: #F3F3F366;
+    --chatbot-input-background-color: rgba(255, 255, 255, 0.32);
+    --chatbot-input-more-background-color: #FFFFFF;
 
     --menu-width: 320px;
     --menu-background-fill: var(--background-fill-primary);
 
     --toolbox-width: 280px;
     --toolbox-background-fill: var(--background-fill-secondary);
+    
     .dark {
         --chatbot-blur-background-color: #12111166;
+        --chatbot-input-background-color: rgba(144, 144, 144, 0.32);
+        --chatbot-input-more-background-color: #3C3C3C;
     }
 }
 
@@ -122,17 +127,23 @@ body.popup-open {
 
 #chatbot-ctrl-btns {
     align-self: end;
+    max-width: 42px;
 }
 #submit-btn, #cancel-btn {
     height: 42px !important;
+    width: 42px !important;
+    border-radius: 50%;
+    transform: scale(0.8);
 }
 #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");
+    content: url("data:image/svg+xml, %3Csvg width='21px' height='21px' 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");
     height: 21px;
+    width: 21px;
 }
 #cancel-btn::before {
     content: url("data:image/svg+xml,%3Csvg width='21px' height='21px' viewBox='0 0 21 21' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='pg' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cpath d='M10.2072007,20.088463 C11.5727865,20.088463 12.8594566,19.8259823 14.067211,19.3010209 C15.2749653,18.7760595 16.3386126,18.0538087 17.2581528,17.1342685 C18.177693,16.2147282 18.8982283,15.1527965 19.4197586,13.9484733 C19.9412889,12.7441501 20.202054,11.4557644 20.202054,10.0833163 C20.202054,8.71773046 19.9395733,7.43106036 19.4146119,6.22330603 C18.8896505,5.01555169 18.1673997,3.95018885 17.2478595,3.0272175 C16.3283192,2.10424615 15.2646719,1.3837109 14.0569176,0.865611739 C12.8491633,0.34751258 11.5624932,0.088463 10.1969073,0.088463 C8.83132146,0.088463 7.54636692,0.34751258 6.34204371,0.865611739 C5.1377205,1.3837109 4.07407321,2.10424615 3.15110186,3.0272175 C2.22813051,3.95018885 1.5058797,5.01555169 0.984349419,6.22330603 C0.46281914,7.43106036 0.202054,8.71773046 0.202054,10.0833163 C0.202054,11.4557644 0.4645347,12.7441501 0.9894961,13.9484733 C1.5144575,15.1527965 2.23670831,16.2147282 3.15624854,17.1342685 C4.07578877,18.0538087 5.1377205,18.7760595 6.34204371,19.3010209 C7.54636692,19.8259823 8.83475258,20.088463 10.2072007,20.088463 Z M10.2072007,18.2562448 C9.07493099,18.2562448 8.01471483,18.0452309 7.0265522,17.6232031 C6.03838956,17.2011753 5.17031614,16.6161693 4.42233192,15.8681851 C3.6743477,15.1202009 3.09105726,14.2521274 2.67246059,13.2639648 C2.25386392,12.2758022 2.04456558,11.215586 2.04456558,10.0833163 C2.04456558,8.95104663 2.25386392,7.89083047 2.67246059,6.90266784 C3.09105726,5.9145052 3.6743477,5.04643178 4.42233192,4.29844756 C5.17031614,3.55046334 6.036674,2.9671729 7.02140552,2.54857623 C8.00613703,2.12997956 9.06463763,1.92068122 10.1969073,1.92068122 C11.329177,1.92068122 12.3911087,2.12997956 13.3827025,2.54857623 C14.3742962,2.9671729 15.2440852,3.55046334 15.9920694,4.29844756 C16.7400537,5.04643178 17.3233441,5.9145052 17.7419408,6.90266784 C18.1605374,7.89083047 18.3698358,8.95104663 18.3698358,10.0833163 C18.3698358,11.215586 18.1605374,12.2758022 17.7419408,13.2639648 C17.3233441,14.2521274 16.7400537,15.1202009 15.9920694,15.8681851 C15.2440852,16.6161693 14.3760118,17.2011753 13.3878492,17.6232031 C12.3996865,18.0452309 11.3394704,18.2562448 10.2072007,18.2562448 Z M7.65444721,13.6242324 L12.7496608,13.6242324 C13.0584616,13.6242324 13.3003556,13.5384544 13.4753427,13.3668984 C13.6503299,13.1953424 13.7378234,12.9585951 13.7378234,12.6566565 L13.7378234,7.49968276 C13.7378234,7.19774418 13.6503299,6.96099688 13.4753427,6.78944087 C13.3003556,6.61788486 13.0584616,6.53210685 12.7496608,6.53210685 L7.65444721,6.53210685 C7.33878414,6.53210685 7.09345904,6.61788486 6.91847191,6.78944087 C6.74348478,6.96099688 6.65599121,7.19774418 6.65599121,7.49968276 L6.65599121,12.6566565 C6.65599121,12.9585951 6.74348478,13.1953424 6.91847191,13.3668984 C7.09345904,13.5384544 7.33878414,13.6242324 7.65444721,13.6242324 Z' id='shape' fill='%23FF3B30' fill-rule='nonzero'%3E%3C/path%3E %3C/g%3E %3C/svg%3E");
     height: 21px;
+    width: 21px;
 }
 
 #chatbot-buttons button {
@@ -357,18 +368,19 @@ body.popup-open {
     display: flex;
     justify-content: center;
     /* padding: 24px; */
-    padding: 8px 6px;
-    min-height: 120px;
-    max-height: 210px;
+    /* padding: 8px 6px; */
+    min-height: 82px;
+    max-height: 166px;
     background: var(--chatbot-blur-background-color);
     -webkit-backdrop-filter: blur(24px);
     backdrop-filter: blur(24px);
 }
 
 #chatbot-input-box {
-    max-width: 1024px;
+    max-width: 800px;
     /* margin: 0 auto; */
     gap: 20px;
+    padding: 16px 24px 24px;
     display: flex;
     background: none;
     align-self: end;
@@ -380,6 +392,66 @@ body.popup-open {
     flex-wrap: nowrap;
 }
 
+button.chatbot-input-more-btn {
+    margin: 5px;
+    height: 32px;
+    width: 32px;
+    border-radius: 50%;
+}
+button.chatbot-input-more-btn:hover .sm-round-bg {
+    fill-opacity: 0.2125;
+}
+button.chatbot-input-more-btn:active .sm-round-bg {
+    fill-opacity: 0.25;
+}
+
+#chatbot-input-more-area {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    bottom: 60px;
+    min-width: 120px;
+    z-index: 50;
+    border-radius: 6px;
+    box-shadow: var(--shadow-sm);
+    background: var(--chatbot-input-more-background-color);
+
+}
+#chatbot-input-more-area > div {
+    min-width: 120px;
+    padding: 2px;
+    align-content: center;
+    /* display: flex; */
+    border-bottom: 0.5px solid var(--border-color-primary);
+}
+#chatbot-input-more-area > div:last-child {
+    border-bottom: none;
+}
+#chatbot-input-more-area > div > label {
+    padding: 6px 8px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+}
+#chatbot-input-more-area > div:hover > label {
+    background: var(--input-background-fill-hover);
+}
+#chatbot-input-more-area > div > label button {
+    margin: 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.chatbot-input-more-icon {
+    margin-right: 12px;
+}
+.chatbot-input-more-span {
+    white-space: nowrap;
+}
+
 /* default invisible */
 #menu-area, #toolbox-area {
     width: 0;
@@ -830,3 +902,4 @@ body.popup-open {
 #chuanhu-body {
     transition: top 0.3s ease-in-out, display 0.3s ease;
 }  */
+

web_assets/stylesheet/chatbot.css

@@ -55,10 +55,28 @@ hr.append-display {
     border: none !important;
 }
 
+
+
+#chatbot-input-row {
+    align-items: end;
+    gap: 6px;
+}
+#chatbot-input-row .gradio-html {
+    min-width: 0;
+    max-width: 42px;
+    width: 42px;
+}
+#chatbot-input-tb-row {
+    gap: 0;
+    justify-content: end;
+    border-radius: 21px;
+    background: var(--chatbot-input-background-color);
+    box-shadow: var(--shadow-md);
+}
 #user-input-tb {
     padding: 0 !important;
-    border: 1px solid rgba(167, 167, 167, 0.5) !important;
-    border-radius: 21px !important;
+    /* border: 1px solid rgba(167, 167, 167, 0.5) !important; */
+    /* border-radius: 21px !important; */
 }
 #user-input-tb textarea {
     /* max-height: 110px; */
@@ -157,7 +175,7 @@ hr.append-display {
     flex-direction: column;
     padding-inline: 20px;
     padding-top: 72px;
-    padding-bottom: 220px;
+    padding-bottom: 180px;
 }
 #chuanhu-chatbot>.wrapper>.wrap .message-wrap {
     align-self: center;

web_assets/stylesheet/custom-components.css

@@ -203,6 +203,7 @@ input:checked + .apSlider::before {
     position: relative !important;
     border: none !important;
     outline: none;
+    margin: 0;
     width: 40px !important;
     height: 22px !important;
     border-radius: 11px !important;