Update index.html

index.html

@@ -2311,34 +2311,100 @@ function initAIAssistant() {
     initSuggestions();
 }
 
-// 初始化建议问题
-function initSuggestions() {
-    const suggestionChips = [
+// 添加收起/展开功能的快捷输入组件
+function createCollapsibleSuggestions() {
+    // 创建容器
+    const suggestionsContainer = document.getElementById('suggestions');
+    if (!suggestionsContainer) return;
+    
+    // 清空现有内容
+    suggestionsContainer.innerHTML = '';
+    
+    // 添加标题栏（可点击展开/收起）
+    const titleBar = document.createElement('div');
+    titleBar.className = 'suggestions-title';
+    titleBar.innerHTML = `
+        <span>常见问题</span>
+        <i class="fas fa-chevron-down"></i>
+    `;
+    suggestionsContainer.appendChild(titleBar);
+    
+    // 创建建议内容容器
+    const suggestionsContent = document.createElement('div');
+    suggestionsContent.className = 'suggestions-content';
+    suggestionsContent.style.display = 'none'; // 默认收起
+    suggestionsContainer.appendChild(suggestionsContent);
+    
+    // 添加建议选项
+    const suggestions = [
         "附近有什么好吃的火锅店？",
         "推荐几家距离我500米内的咖啡厅",
         "帮我规划一个3小时的美食路线",
         "有什么适合带孩子去的餐厅？"
     ];
     
-    const suggestionsContainer = document.getElementById('suggestions');
-    suggestionsContainer.innerHTML = '';
-    
-    suggestionChips.forEach(suggestion => {
+    suggestions.forEach(text => {
         const chip = document.createElement('div');
         chip.className = 'suggestion-chip';
-        chip.textContent = suggestion;
-        
-        // 确保只触发一次发送操作
+        chip.textContent = text;
         chip.addEventListener('click', function() {
             document.getElementById('user-input').value = this.textContent;
-            // 直接调用发送函数，而不是通过点击事件
             sendUserMessage();
         });
-        
-        suggestionsContainer.appendChild(chip);
+        suggestionsContent.appendChild(chip);
+    });
+    
+    // 添加展开/收起功能
+    titleBar.addEventListener('click', function() {
+        const isExpanded = suggestionsContent.style.display !== 'none';
+        if (isExpanded) {
+            suggestionsContent.style.display = 'none';
+            titleBar.querySelector('i').className = 'fas fa-chevron-down';
+        } else {
+            suggestionsContent.style.display = 'flex';
+            titleBar.querySelector('i').className = 'fas fa-chevron-up';
+        }
     });
+    
+    // 添加CSS
+    const styleElement = document.createElement('style');
+    styleElement.textContent = `
+        .suggestions-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 15px;
+            background-color: var(--ios-bg);
+            border-radius: 10px;
+            margin-bottom: 5px;
+            cursor: pointer;
+            font-size: 14px;
+            color: var(--ios-primary);
+            font-weight: 500;
+        }
+        
+        .suggestions-content {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            padding: 5px 10px 10px 10px;
+            overflow: hidden;
+            transition: max-height 0.3s ease;
+        }
+        
+        .chat-suggestions {
+            border-top: 1px solid var(--ios-border);
+            padding: 10px;
+            background: var(--ios-card-bg);
+        }
+    `;
+    document.head.appendChild(styleElement);
 }
 
+// 替换原有的初始化建议问题函数
+function initSuggestions() {
+    createCollapsibleSuggestions();
+}
 // 切换助手显示/隐藏
 function toggleAssistant(show) {
     const assistant = document.getElementById('ai-assistant');