feat(difychat): 新增可折叠侧边栏和时间分组功能

- 添加可折叠的侧边栏功能，支持本地存储折叠状态
- 引入时间分组工具函数，对会话列表按时间分组显示
- 优化消息处理逻辑，修复增量消息显示问题
- 添加键盘快捷键(Ctrl+K)支持新建对话
- 改进UI动画效果和响应式布局

Author: weilei

examples/src/utils/difyAdapter.js

@@ -32,58 +32,55 @@ export function transformBlockingResponse(response) {
   };
 }
 
+/**
+ * 解析 SSE 流式数据块
+ * @param {string} chunk - SSE 数据块
+ * @returns {Object|null} 解析后的数据对象
+ */
 /**
  * 解析 SSE 流式数据块
  * @param {string} chunk - SSE 数据块
  * @returns {Object|null} 解析后的数据对象
  */
 export function parseSSEChunk(chunk) {
   try {
-    // 处理 dify SSE 格式：data: {json}
-    // console.log(chunk,chunk.startsWith('data: '))
+    // console.log('chunk:', chunk);
+    const data = chunk;
 
-    const cleanChunk =  chunk;
-    // 检查是否是结束标志
-    if (cleanChunk === '[DONE]') {
-      return { type: 'done' };
-    }
-    
-    const data = JSON.parse(cleanChunk);
-    
     // 根据 event 类型处理不同的数据
     switch (data.event) {
       case 'message':
-        return {
-          type: 'message',
-          data: {
-            id: data.message_id,
-            content: data.answer || '',
-            conversation_id: data.conversation_id,
-            created_at: data.created_at,
-            metadata: data.metadata || {},
-          },
-        };
-      
-      case 'message_delta':
+        // 检查是否是结束标志（answer 为空字符串）
+        if (data.answer === '') {
+          return {
+            type: 'end',
+            data: {
+              id: data.message_id,
+              conversation_id: data.conversation_id,
+              created_at: data.created_at,
+              task_id: data.task_id,
+              metadata: {
+                from_variable_selector: data.from_variable_selector || [],
+              },
+            },
+          };
+        }
+
+        // 返回增量数据
         return {
           type: 'delta',
           data: {
             id: data.message_id,
-            delta: data.delta || '',
-            conversation_id: data.conversation_id,
-          },
-        };
-      
-      case 'message_end':
-        return {
-          type: 'end',
-          data: {
-            id: data.message_id,
+            delta: data.answer, // answer 字段包含增量内容
             conversation_id: data.conversation_id,
-            metadata: data.metadata || {},
+            created_at: data.created_at,
+            task_id: data.task_id,
+            metadata: {
+              from_variable_selector: data.from_variable_selector || [],
+            },
           },
         };
-      
+
       default:
         return {
           type: 'unknown',
@@ -101,7 +98,7 @@ export function parseSSEChunk(chunk) {
  * @returns {Function} 转换器函数
  */
 export function createDifyTransformer() {
-  return (chunk) => {
+  return chunk => {
     return parseSSEChunk(chunk);
   };
 }
@@ -116,12 +113,12 @@ export function createDifyTransformer() {
  */
 export function createDifyRequestConfig(options = {}) {
   const { baseURL = 'https://api.dify.ai/v1', apiKey, user = 'default-user' } = options;
-  
+
   return {
     baseURL,
     baseOptions: {
       headers: {
-        'Authorization': `Bearer ${apiKey}`,
+        Authorization: `Bearer ${apiKey}`,
         'Content-Type': 'application/json',
       },
     },
@@ -154,14 +151,18 @@ export function buildChatMessageRequest(params) {
     inputs = {},
     auto_generate_name = true,
   } = params;
-  
+
   return {
     query,
     inputs,
     response_mode,
     user,
-    ...(conversation_id && { conversation_id }),
-    ...(files.length > 0 && { files }),
+    ...(conversation_id && {
+      conversation_id,
+    }),
+    ...(files.length > 0 && {
+      files,
+    }),
     auto_generate_name,
   };
 }
@@ -172,4 +173,4 @@ export default {
   createDifyTransformer,
   createDifyRequestConfig,
   buildChatMessageRequest,
-};
+};

examples/src/utils/timeUtils.js

@@ -0,0 +1,81 @@
+/**
+ * 时间处理工具函数
+ */
+
+/**
+ * 根据时间获取分组标签
+ * @param {string|Date|number} dateTime - 时间字符串、Date对象或Unix时间戳
+ * @returns {string} 分组标签：今天、7天内、30天内、yyyy-MM
+ */
+export function getTimeGroup(dateTime) {
+  // 处理Unix时间戳（秒）
+  let createdAt;
+  if (typeof dateTime === 'number') {
+    // Unix时间戳通常是秒，需要转换为毫秒
+    createdAt = new Date(dateTime * 1000);
+  } else {
+    createdAt = new Date(dateTime);
+  }
+
+  const now = new Date();
+  const diffTime = now - createdAt;
+  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+
+  if (diffDays === 0) {
+    return '今天';
+  } else if (diffDays <= 7) {
+    return '7天内';
+  } else if (diffDays <= 30) {
+    return '30天内';
+  } else {
+    // 格式化为 yyyy-MM
+    const year = createdAt.getFullYear();
+    const month = String(createdAt.getMonth() + 1).padStart(2, '0');
+    return `${year}-${month}`;
+  }
+}
+
+/**
+ * 批量为数据项添加时间分组字段
+ * @param {Array} items - 数据项数组
+ * @param {string} timeField - 时间字段名，默认为'created_at'
+ * @returns {Array} 添加了group字段的数据项数组
+ */
+export function addTimeGroupToItems(items, timeField = 'created_at') {
+  return items.map(item => ({
+    ...item,
+    group: getTimeGroup(item[timeField]),
+  }));
+}
+
+/**
+ * 格式化时间为可读格式
+ * @param {string|Date|number} dateTime - 时间字符串、Date对象或Unix时间戳
+ * @param {string} format - 格式化模式，默认为'YYYY-MM-DD HH:mm:ss'
+ * @returns {string} 格式化后的时间字符串
+ */
+export function formatTime(dateTime, format = 'YYYY-MM-DD HH:mm:ss') {
+  // 处理Unix时间戳（秒）
+  let date;
+  if (typeof dateTime === 'number') {
+    // Unix时间戳通常是秒，需要转换为毫秒
+    date = new Date(dateTime * 1000);
+  } else {
+    date = new Date(dateTime);
+  }
+
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+
+  return format
+    .replace('YYYY', year)
+    .replace('MM', month)
+    .replace('DD', day)
+    .replace('HH', hours)
+    .replace('mm', minutes)
+    .replace('ss', seconds);
+}