优化页面样式，对齐市面上左导航右对话的布局｜修复输入框为空时，调用功能仍正常对话

__main__.py

@@ -68,13 +68,16 @@ class ChatBot(ChatBotFrame):
         # self.__gr_url = gr.State(self.__url)
 
     def draw_title(self):
-        self.title = gr.HTML(self.title_html)
+        # self.title = gr.HTML(self.title_html)
         self.cookies = gr.State({'api_key': API_KEY, 'llm_model': LLM_MODEL, 'local': self.__url})
 
     def draw_chatbot(self):
-        self.chatbot = gr.Chatbot(label=f"当前模型：{LLM_MODEL}")
+        self.chatbot = gr.Chatbot(elem_id='main_chatbot', label=f"当前模型：{LLM_MODEL}")
         self.chatbot.style(height=CHATBOT_HEIGHT)
         self.history = gr.State([])
+        with gr.Row():
+            self.txt = gr.Textbox(show_label=False, placeholder="Input question here.").style(container=False)
+            self.submitBtn = gr.Button("提交", variant="primary").style(full_width=False)
         with gr.Row():
             self.status = gr.Markdown(f"Tip: 按Enter提交, 按Shift+Enter换行。当前模型: {LLM_MODEL} \n {proxy_info}")
 
@@ -82,7 +85,7 @@ class ChatBot(ChatBotFrame):
         with gr.Row():
             self.pro_search_txt = gr.Textbox(show_label=False, placeholder="Enter the prompt you want.").style(
                 container=False)
-            self.pro_entry_btn = gr.Button("搜索", variant="secondary").style(full_width=False, size="sm")
+            self.pro_entry_btn = gr.Button("搜索", variant="primary").style(full_width=False, size="sm")
         with gr.Row():
             self.pro_prompt_list = gr.Dataset(components=[gr.HTML(visible=False)], samples_per_page=10,
                                               label="Prompt usage frequency",
@@ -127,22 +130,14 @@ class ChatBot(ChatBotFrame):
                                outputs=[self.pro_edit_txt, self.pro_name_txt, self.pro_private_check,
                                         self.pro_func_prompt, self.pro_fp_state])
 
-    def draw_input_chat(self):
-        with gr.Accordion("输入区", open=True) as self.area_input_primary:
-            with gr.Row():
-                self.txt = gr.Textbox(show_label=False, placeholder="Input question here.").style(container=False)
-            with gr.Row():
-                self.submitBtn = gr.Button("提交", variant="primary")
+    def draw_function_chat(self):
+        prompt_list, devs_document = get_conf('prompt_list', 'devs_document')
         with gr.Row():
             # self.cpopyBtn = gr.Button("复制回答", variant="secondary").style(size="sm")
             self.resetBtn = gr.Button("重置Chatbot", variant="secondary").style(size="sm")
-                self.stopBtn = gr.Button("停止", variant="secondary").style(size="sm")
-
-
-    def draw_function_chat(self):
-        prompt_list, devs_document = get_conf('prompt_list', 'devs_document')
+            self.stopBtn = gr.Button("停止", variant="stop").style(size="sm")
         with gr.Tab('Function'):
-            with gr.Accordion("基础功能区", open=False) as self.area_basic_fn:
+            with gr.Accordion("基础功能区", open=True) as self.area_basic_fn:
                 with gr.Row():
                     for k in functional:
                         variant = functional[k]["Color"] if "Color" in functional[k] else "secondary"
@@ -351,20 +346,20 @@ class ChatBot(ChatBotFrame):
             # 绘制一个ROW，row会让底下的元素自动排成一行
             with gr.Row().style(justify='between'):
                 # 绘制列1
+                with gr.Column(scale=46):
+                    # 绘制对话模组
+                    with gr.Tab('Chat-Copilot'):
+                        self.draw_function_chat()
+                        self.draw_public_chat()
+                        self.draw_setting_chat()
+                # 绘制列2
                 with gr.Column(scale=100):
                     with gr.Tab('Chatbot') as self.chat_tab:
                         # self.draw_chatbot()
                         pass
                     with gr.Tab('Prompt检索/编辑') as self.prompt_tab:
                         self.draw_prompt()
-                # 绘制列2
-                with gr.Column(scale=51):
-                    # 绘制对话模组
-                    with gr.Tab('Chat-GPT'):
-                        self.draw_input_chat()
-                        self.draw_function_chat()
-                        self.draw_public_chat()
-                        self.draw_setting_chat()
+
                     # 绘制autogpt模组
                     # with gr.Tab('Auto-GPT'):
                     #     self.draw_next_auto()

func_box.py

@@ -156,14 +156,14 @@ def md5_str(st):
     return result
 
 
-def html_tag_color(tag, color=None):
+def html_tag_color(tag, color=None, font='black'):
     """
     将文本转换为带有高亮提示的html代码
     """
     if not color:
         rgb = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
         color = f"rgb{rgb}"
-    tag = f'<span style="background-color: {color}; font-weight: bold; color: black">&nbsp;{tag}&ensp;</span>'
+    tag = f'<span style="background-color: {color}; font-weight: bold; color: {font}">&nbsp;{tag}&ensp;</span>'
     return tag
 
 

theme.py

@@ -103,6 +103,20 @@ def adjust_theme():
 
 
 advanced_css = """
+#main_chatbot{
+    height: 100vh;
+    max-height: 75vh;
+    overflow: hidden !important;
+}
+.app.svelte-1mya07g.svelte-1mya07g {
+    max-width: 100%;
+    position: relative;
+    /* margin: auto; */
+    padding: var(--size-4);
+    width: 100%;
+    height: 100%;
+}
+
 .markdown-body table {
     margin: 1em 0;
     border-collapse: collapse;
@@ -128,6 +142,7 @@ advanced_css = """
 
 /* chat box. */
 [class *= "message"] {
+    gap: 7px !important;
     border-radius: var(--radius-xl) !important;
     /* padding: var(--spacing-xl) !important; */
     /* font-size: var(--text-md) !important; */

toolbox.py

@@ -84,9 +84,9 @@ def ArgsGeneralWrapper(f):
         chatbot_with_cookie.write_list(chatbot)
         txt_passon = txt
         if encrypt in models: txt_passon = func_box.encryption_str(txt)
-        if txt_passon == '' and txt_passon == ' ' and len(args) > 1:
-            msgs = f'### {args[1]} Warning 输入框为空\n' \
-                   'tips: 使用基础功能时，请在输入区输入需要处理的文本内容'
+        if txt_passon == '' and len(args) > 1:
+            msgs = f'### Warning 输入框为空\n' \
+                   f'tips: 使用基础功能或{func_box.html_tag_color("高亮插件", "#b522c5", "ffffff")}功能时，请在输入区输入需要处理的内容'
             yield from update_ui(chatbot=chatbot_with_cookie, history=history, msg=msgs)  # 刷新界面
             return
         yield from f(txt_passon, llm_kwargs, plugin_kwargs, chatbot_with_cookie, history, system_prompt, *args)
@@ -346,9 +346,9 @@ def close_up_code_segment_during_stream(gpt_reply):
         str: 返回一个新的字符串，将输出代码片段的“后面的```”补上。
 
     """
-    if '```' not in gpt_reply:
+    if '```' not in str(gpt_reply):
         return gpt_reply
-    if gpt_reply.endswith('```'):
+    if str(gpt_reply).endswith('```'):
         return gpt_reply
 
     # 排除了以上两个情况，我们