feat: 通过上下方向键在对话框中自动填入用户历史发送信息 (#509)

* 加入了方向键的支持，可以通过上下方向键自动填入历史信息
* 更新默认的最大历史长度为常量32
* 修改了阻止默认行为的逻辑，只对于对于需要响应的时候，才阻止上下键的默认行为。

ChuanhuChatbot.py

@@ -51,6 +51,7 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
             with gr.Row():
                 with gr.Column(scale=12):
                     user_input = gr.Textbox(
+                        elem_id="user_input_tb",
                         show_label=False, placeholder="在这里输入"
                     ).style(container=False)
                 with gr.Column(min_width=70, scale=1):

assets/custom.js

@@ -1 +1,70 @@
-// custom javascript here
+// custom javascript here
+const MAX_HISTORY_LENGTH = 32;
+
+var key_down_history = [];
+var currentIndex = -1;
+var user_input_ta;
+
+var ga = document.getElementsByTagName("gradio-app");
+var targetNode = ga[0];
+var observer = new MutationObserver(function(mutations) {
+    for (var i = 0; i < mutations.length; i++) {
+        if (mutations[i].addedNodes.length) {
+          var user_input_tb = document.getElementById('user_input_tb');
+          if (user_input_tb) {
+            // 监听到user_input_tb被添加到DOM树中
+            // 这里可以编写元素加载完成后需要执行的代码
+            user_input_ta = user_input_tb.querySelector("textarea");
+            if (user_input_ta){
+                observer.disconnect(); // 停止监听
+                // 在 textarea 上监听 keydown 事件
+                user_input_ta.addEventListener("keydown", function (event) {     
+                    var value = user_input_ta.value.trim();               
+                    // 判断按下的是否为方向键
+                    if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
+                        // 如果按下的是方向键，且输入框中有内容，且历史记录中没有该内容，则不执行操作
+                        if(value && key_down_history.indexOf(value) === -1)
+                            return;
+                        // 对于需要响应的动作，阻止默认行为。
+                        event.preventDefault();
+                        var length = key_down_history.length;
+                        if(length === 0) {
+                            currentIndex = -1; // 如果历史记录为空，直接将当前选中的记录重置
+                            return;
+                        }
+                        if (currentIndex === -1) {
+                            currentIndex = length;
+                        }
+                        if (event.code === 'ArrowUp' && currentIndex > 0) {
+                            currentIndex--;
+                            user_input_ta.value = key_down_history[currentIndex];
+                        } else if (event.code === 'ArrowDown' && currentIndex < length - 1) {
+                            currentIndex++;
+                            user_input_ta.value = key_down_history[currentIndex];                            
+                        }
+                        user_input_ta.selectionStart = user_input_ta.value.length;
+                        user_input_ta.selectionEnd = user_input_ta.value.length;
+                        const input_event = new InputEvent("input", {bubbles: true, cancelable: true});
+                        user_input_ta.dispatchEvent(input_event);
+                    }else if(event.code === "Enter") {
+                        if (value) {
+                            currentIndex = -1;
+                            if(key_down_history.indexOf(value) === -1){
+                                key_down_history.push(value);
+                                if (key_down_history.length > MAX_HISTORY_LENGTH) {
+                                    key_down_history.shift();
+                                }
+                            }
+                        }
+                    }
+                });
+                break;
+            }
+          }
+        }
+      }
+});
+
+// 监听目标节点的子节点列表是否发生变化
+observer.observe(targetNode, { childList: true ,  subtree: true });
+