WIP: chat-with-more labels when full width....

web_assets/html/chatbot_more.html

@@ -1,38 +1,44 @@
 <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>
+        <span class="chatbot-input-more-label-group">
+            <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>
+        </span>
+
+        <span class="chatbot-input-more-label-group">
+            <div class="chatbot-input-more-btn last-btn">
+                <label>
+                    <button>
+                        <span class="chatbot-input-more-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>
-                            </g>
-                        </svg>
-                    </span>
-                </button>
-            </label>
-        </div>
+                            </svg>
+                        </span>
+                    </button>
+                </label>
+            </div>
+        </span>
     </div>
 
     <!-- get more button -->
-    <div>
+    <div id="chatbot-input-more-btn-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">

web_assets/javascript/ChuanhuChat.js

@@ -11,6 +11,7 @@ var user_input_ta = null;
 var user_input_tb = null;
 var userInfoDiv = null;
 var appTitleDiv = null;
+var chatbotArea = null;
 var chatbot = null;
 var chatbotIndicator = null;
 var chatbotWrap = null;
@@ -65,6 +66,7 @@ function initialize() {
     user_input_tb = gradioApp().getElementById('user-input-tb');
     userInfoDiv = gradioApp().getElementById("user-info");
     appTitleDiv = gradioApp().getElementById("app-title");
+    chatbotArea = gradioApp().querySelector('#chatbot-area');
     chatbot = gradioApp().querySelector('#chuanhu-chatbot');
     chatbotWrap = gradioApp().querySelector('#chuanhu-chatbot > .wrapper > .wrap');
     apSwitch = gradioApp().querySelector('.apSwitch input[type="checkbox"]');

web_assets/javascript/webui.js

@@ -149,6 +149,7 @@ function adjustSide() {
             // closeSide(toolbox);
         }
     }
+    checkChatbotWidth();
     adjustMask();
 }
 
@@ -182,6 +183,15 @@ function adjustMask() {
     }
 }
 
+function checkChatbotWidth() {
+    // let chatbotWidth = chatbotArea.clientWidth;
+    // if (chatbotWidth > 488) {
+    if (windowWidth > 768) {
+        chatbotArea.classList.add('chatbot-full-width');
+    } else {
+        chatbotArea.classList.remove('chatbot-full-width');
+    }
+}
 
 /*
 function setHistroyPanel() {

web_assets/stylesheet/ChuanhuChat.css

@@ -15,6 +15,8 @@
     --chatbot-blur-background-color: #F3F3F366;
     --chatbot-input-background-color: rgba(255, 255, 255, 0.32);
     --chatbot-input-more-background-color: #FFFFFF;
+    --chatbot-input-more-background-fullwidth-hover: #FFFFFF88;
+    --chatbot-input-more-background-mobilewidth-hover: #F6F6F6;
 
     --menu-width: 320px;
     --menu-background-fill: var(--background-fill-primary);
@@ -26,6 +28,8 @@
         --chatbot-blur-background-color: #12111166;
         --chatbot-input-background-color: rgba(144, 144, 144, 0.32);
         --chatbot-input-more-background-color: #3C3C3C;
+        --chatbot-input-more-background-fullwidth-hover: #1F1F1F88;
+        --chatbot-input-more-background-mobilewidth-hover: #1F1F1F44;
     }
 }
 
@@ -370,7 +374,7 @@ body.popup-open {
     /* padding: 24px; */
     /* padding: 8px 6px; */
     min-height: 82px;
-    max-height: 166px;
+    /* max-height: 166px; */
     background: var(--chatbot-blur-background-color);
     -webkit-backdrop-filter: blur(24px);
     backdrop-filter: blur(24px);
@@ -405,40 +409,43 @@ button.chatbot-input-more-btn:active .sm-round-bg {
     fill-opacity: 0.25;
 }
 
+/* 三个点号点开！ */
+/* no！屏幕宽度窄的时候！ */
 #chatbot-input-more-area {
     position: absolute;
     display: flex;
     flex-direction: column;
     bottom: 60px;
     min-width: 120px;
-    z-index: 50;
+    z-index: 5000;
     border-radius: 6px;
     box-shadow: var(--shadow-sm);
     background: var(--chatbot-input-more-background-color);
 
 }
-#chatbot-input-more-area > div {
+#chatbot-input-more-area > span > 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 {
+#chatbot-input-more-area > span > div.last-btn {
     border-bottom: none;
 }
-#chatbot-input-more-area > div > label {
+#chatbot-input-more-area > span > div > label {
     padding: 6px 8px;
     border-radius: 4px;
+    height: 39px;
     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 > span > div:hover > label {
+    background: var(--chatbot-input-more-background-mobilewidth-hover);
 }
-#chatbot-input-more-area > div > label button {
+#chatbot-input-more-area > span > div > label button {
     margin: 0;
     width: 100%;
     display: flex;
@@ -452,6 +459,51 @@ button.chatbot-input-more-btn:active .sm-round-bg {
     white-space: nowrap;
 }
 
+/* 哈哈！川虎哥觉得不方便，那再写个全宽的吧！
+ * 再让我重写一份样式我是狗
+ */
+.chatbot-full-width #chatbot-input-row {
+    flex-direction: column;
+    justify-content: flex-start !important;
+    justify-items: start;
+}
+.chatbot-full-width #chatbot-input-more-area {
+    position: relative;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    height: 32px;
+    min-width: unset;
+    background: none;
+    box-shadow: none;
+    bottom: 0;
+}
+.chatbot-full-width #chatbot-input-more-area > span > div {
+    /* min-width: unset; */
+    border-bottom: none;
+}
+.chatbot-full-width #chatbot-input-more-area > span > div > label {
+    height: 32px;
+    border-radius: 8px;
+}
+.chatbot-full-width #chatbot-input-more-area > span > div:hover > label {
+    background: var(--chatbot-input-more-background-fullwidth-hover);
+}
+.chatbot-full-width #chatbot-input-more-btn-div {
+    display: none;
+}
+.chatbot-full-width #chatbot-input-box {
+    padding-top: 4px;
+}
+.chatbot-full-width #chatbot-input-row .gradio-html {
+    width: 100%;
+    max-width: unset;
+}
+.chatbot-full-width .chatbot-input-more-label-group {
+    flex-wrap: nowrap;
+    flex-direction: row-reverse;
+    display: inline-flex;
+}
+
 /* default invisible */
 #menu-area, #toolbox-area {
     width: 0;