npm - @lobehub/chat - Versions diffs - 1.51.1 → 1.51.3 - Mend

@lobehub/chat 1.51.1 → 1.51.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

package/CHANGELOG.md +66 -0
package/Dockerfile +1 -1
package/Dockerfile.database +1 -1
package/changelog/v1.json +21 -0
package/docs/usage/providers/wenxin.mdx +16 -13
package/docs/usage/providers/wenxin.zh-CN.mdx +11 -8
package/next.config.ts +6 -0
package/package.json +1 -2
package/src/app/(main)/settings/llm/ProviderList/providers.tsx +2 -4
package/src/config/aiModels/ai360.ts +22 -2
package/src/config/aiModels/fireworksai.ts +3 -0
package/src/config/aiModels/giteeai.ts +60 -0
package/src/config/aiModels/github.ts +7 -0
package/src/config/aiModels/google.ts +2 -0
package/src/config/aiModels/groq.ts +12 -0
package/src/config/aiModels/huggingface.ts +6 -0
package/src/config/aiModels/internlm.ts +19 -2
package/src/config/aiModels/ollama.ts +1 -0
package/src/config/aiModels/openai.ts +10 -0
package/src/config/aiModels/perplexity.ts +3 -0
package/src/config/aiModels/qwen.ts +2 -0
package/src/config/aiModels/siliconcloud.ts +4 -0
package/src/config/aiModels/togetherai.ts +64 -1
package/src/config/aiModels/wenxin.ts +125 -19
package/src/config/aiModels/zhipu.ts +3 -0
package/src/config/llm.ts +3 -5
package/src/config/modelProviders/wenxin.ts +100 -23
package/src/const/auth.ts +0 -3
package/src/features/Conversation/Error/APIKeyForm/index.tsx +0 -3
package/src/features/Conversation/components/ChatItem/utils.test.ts +284 -0
package/src/features/Conversation/components/ChatItem/utils.ts +39 -8
package/src/features/Conversation/components/MarkdownElements/LobeArtifact/rehypePlugin.test.ts +125 -0
package/src/features/DevPanel/CacheViewer/DataTable/index.tsx +33 -0
package/src/features/DevPanel/CacheViewer/cacheProvider.tsx +64 -0
package/src/features/DevPanel/CacheViewer/getCacheEntries.ts +52 -0
package/src/features/DevPanel/CacheViewer/index.tsx +25 -0
package/src/features/DevPanel/CacheViewer/schema.ts +49 -0
package/src/features/DevPanel/FeatureFlagViewer/Form.tsx +93 -0
package/src/features/DevPanel/FeatureFlagViewer/index.tsx +11 -0
package/src/features/DevPanel/MetadataViewer/Ld.tsx +25 -0
package/src/features/DevPanel/MetadataViewer/MetaData.tsx +30 -0
package/src/features/DevPanel/MetadataViewer/Og.tsx +75 -0
package/src/features/DevPanel/MetadataViewer/index.tsx +80 -0
package/src/features/DevPanel/MetadataViewer/useHead.ts +16 -0
package/src/features/DevPanel/PostgresViewer/DataTable/index.tsx +39 -49
package/src/features/DevPanel/PostgresViewer/{TableColumns.tsx → SchemaSidebar/Columns.tsx} +6 -4
package/src/features/DevPanel/PostgresViewer/{Schema.tsx → SchemaSidebar/index.tsx} +49 -55
package/src/features/DevPanel/PostgresViewer/index.tsx +4 -2
package/src/features/DevPanel/features/FloatPanel.tsx +218 -0
package/src/features/DevPanel/features/Header.tsx +50 -0
package/src/features/DevPanel/features/Table/TableCell.tsx +73 -0
package/src/features/DevPanel/features/Table/TooltipContent.tsx +39 -0
package/src/features/DevPanel/{PostgresViewer/DataTable/Table.tsx → features/Table/index.tsx} +12 -14
package/src/features/DevPanel/index.tsx +29 -5
package/src/libs/agent-runtime/AgentRuntime.test.ts +0 -1
package/src/libs/agent-runtime/AgentRuntime.ts +7 -0
package/src/libs/agent-runtime/wenxin/index.ts +10 -107
package/src/locales/default/modelProvider.ts +0 -20
package/src/server/modules/AgentRuntime/index.test.ts +0 -21
package/src/services/_auth.ts +0 -14
package/src/store/chat/slices/portal/selectors.test.ts +169 -3
package/src/store/chat/slices/portal/selectors.ts +6 -1
package/src/store/user/slices/modelList/selectors/keyVaults.ts +0 -2
package/src/types/aiProvider.ts +0 -1
package/src/types/user/settings/keyVaults.ts +1 -6
package/src/app/(backend)/webapi/chat/wenxin/route.test.ts +0 -27
package/src/app/(backend)/webapi/chat/wenxin/route.ts +0 -30
package/src/app/(main)/settings/llm/ProviderList/Wenxin/index.tsx +0 -44
package/src/app/(main)/settings/provider/(detail)/wenxin/page.tsx +0 -61
package/src/features/Conversation/Error/APIKeyForm/Wenxin.tsx +0 -49
package/src/features/DevPanel/FloatPanel.tsx +0 -136
package/src/features/DevPanel/PostgresViewer/DataTable/TableCell.tsx +0 -34
package/src/libs/agent-runtime/utils/streams/wenxin.test.ts +0 -153
package/src/libs/agent-runtime/utils/streams/wenxin.ts +0 -38
package/src/libs/agent-runtime/wenxin/type.ts +0 -84

package/src/features/Conversation/components/ChatItem/utils.test.ts CHANGED Viewed

@@ -147,4 +147,288 @@ describe('processWithArtifact', () => {
     expect(output).toEqual(`<lobeThinking>这个词汇涉及了`);
   });
+  it('should handle no empty line between lobeThinking and lobeArtifact', () => {
+    const input = `<lobeThinking>这是一个思考过程。</lobeThinking>
+<lobeArtifact identifier="test" type="image/svg+xml" title="测试">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" fill="blue"/>
+</svg>
+</lobeArtifact>`;
+    const output = processWithArtifact(input);
+    expect(output).toEqual(`<lobeThinking>这是一个思考过程。</lobeThinking>
+<lobeArtifact identifier="test" type="image/svg+xml" title="测试"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">  <rect width="100" height="100" fill="blue"/></svg></lobeArtifact>`);
+  });
+  it('should remove fenced code block between lobeArtifact and HTML content', () => {
+    const input = `<lobeArtifact identifier="web-calculator" type="text/html" title="简单的 Web 计算器">
+\`\`\`html
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <title>计算器</title>
+</head>
+<body>
+  <div>计算器</div>
+</body>
+</html>
+\`\`\`
+</lobeArtifact>`;
+    const output = processWithArtifact(input);
+    expect(output).toEqual(
+      `<lobeArtifact identifier="web-calculator" type="text/html" title="简单的 Web 计算器"><!DOCTYPE html><html lang="zh"><head>  <title>计算器</title></head><body>  <div>计算器</div></body></html></lobeArtifact>`,
+    );
+  });
+  it('should remove fenced code block between lobeArtifact and HTML content without doctype', () => {
+    const input = `<lobeArtifact identifier="web-calculator" type="text/html" title="简单的 Web 计算器">
+\`\`\`html
+<html lang="zh">
+<head>
+  <title>计算器</title>
+</head>
+<body>
+  <div>计算器</div>
+</body>
+</html>
+\`\`\`
+</lobeArtifact>`;
+    const output = processWithArtifact(input);
+    expect(output).toEqual(
+      `<lobeArtifact identifier="web-calculator" type="text/html" title="简单的 Web 计算器"><html lang="zh"><head>  <title>计算器</title></head><body>  <div>计算器</div></body></html></lobeArtifact>`,
+    );
+  });
+  it('should remove outer fenced code block wrapping lobeThinking and lobeArtifact', () => {
+    const input =
+      '```tool_code\n<lobeThinking>这是一个思考过程。</lobeThinking>\n\n<lobeArtifact identifier="test" type="text/html" title="测试">\n<div>测试内容</div>\n</lobeArtifact>\n```';
+    const output = processWithArtifact(input);
+    expect(output).toEqual(
+      '<lobeThinking>这是一个思考过程。</lobeThinking>\n\n<lobeArtifact identifier="test" type="text/html" title="测试"><div>测试内容</div></lobeArtifact>',
+    );
+  });
+  it('should handle both outer code block and inner HTML code block', () => {
+    const input =
+      '```tool_code\n<lobeThinking>这是一个思考过程。</lobeThinking>\n\n<lobeArtifact identifier="test" type="text/html" title="测试">\n```html\n<!DOCTYPE html>\n<html>\n<body>\n<div>测试内容</div>\n</body>\n</html>\n```\n</lobeArtifact>\n```';
+    const output = processWithArtifact(input);
+    expect(output).toEqual(
+      '<lobeThinking>这是一个思考过程。</lobeThinking>\n\n<lobeArtifact identifier="test" type="text/html" title="测试"><!DOCTYPE html><html><body><div>测试内容</div></body></html></lobeArtifact>',
+    );
+  });
+  it('should handle complete conversation with text and tags', () => {
+    const input = `Sure, I can help you with that! Here is a basic calculator built using HTML, CSS, and JavaScript.
+<lobeThinking>A web calculator is a substantial piece of code and a good candidate for an artifact. It's self-contained, and it's likely that the user will want to modify it. This is a new request, so I will create a new artifact.</lobeThinking>
+<lobeArtifact identifier="web-calculator" type="text/html" title="Web Calculator">
+\`\`\`html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Simple Calculator</title>
+</head>
+<body>
+    <div>Calculator</div>
+</body>
+</html>
+\`\`\`
+</lobeArtifact>
+This code provides a basic calculator that can perform addition, subtraction, multiplication, and division.`;
+    const output = processWithArtifact(input);
+    expect(output)
+      .toEqual(`Sure, I can help you with that! Here is a basic calculator built using HTML, CSS, and JavaScript.
+<lobeThinking>A web calculator is a substantial piece of code and a good candidate for an artifact. It's self-contained, and it's likely that the user will want to modify it. This is a new request, so I will create a new artifact.</lobeThinking>
+<lobeArtifact identifier="web-calculator" type="text/html" title="Web Calculator"><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Simple Calculator</title></head><body>    <div>Calculator</div></body></html></lobeArtifact>
+This code provides a basic calculator that can perform addition, subtraction, multiplication, and division.`);
+  });
+});
+describe('outer code block removal', () => {
+  it('should remove outer html code block', () => {
+    const input = `\`\`\`html
+<lobeThinking>Test thinking</lobeThinking>
+<lobeArtifact identifier="test" type="text/html" title="Test">
+<!DOCTYPE html>
+<html>
+<body>Test</body>
+</html>
+</lobeArtifact>
+\`\`\``;
+    const output = processWithArtifact(input);
+    expect(output).toEqual(`<lobeThinking>Test thinking</lobeThinking>
+<lobeArtifact identifier="test" type="text/html" title="Test"><!DOCTYPE html><html><body>Test</body></html></lobeArtifact>`);
+  });
+  it('should remove outer tool_code code block', () => {
+    const input = `\`\`\`tool_code
+<lobeThinking>Test thinking</lobeThinking>
+<lobeArtifact identifier="test" type="text/html" title="Test">
+<!DOCTYPE html>
+<html>
+<body>Test</body>
+</html>
+</lobeArtifact>
+\`\`\``;
+    const output = processWithArtifact(input);
+    expect(output).toEqual(`<lobeThinking>Test thinking</lobeThinking>
+<lobeArtifact identifier="test" type="text/html" title="Test"><!DOCTYPE html><html><body>Test</body></html></lobeArtifact>`);
+  });
+  it('should handle input without outer code block', () => {
+    const input = `<lobeThinking>Test thinking</lobeThinking>
+<lobeArtifact identifier="test" type="text/html" title="Test">
+<!DOCTYPE html>
+<html>
+<body>Test</body>
+</html>
+</lobeArtifact>`;
+    const output = processWithArtifact(input);
+    expect(output).toEqual(`<lobeThinking>Test thinking</lobeThinking>
+<lobeArtifact identifier="test" type="text/html" title="Test"><!DOCTYPE html><html><body>Test</body></html></lobeArtifact>`);
+  });
+  it('should handle code block with content before and after', () => {
+    const input = `Some text before
+\`\`\`html
+<lobeThinking>Test thinking</lobeThinking>
+<lobeArtifact identifier="test" type="text/html" title="Test">
+<!DOCTYPE html>
+<html>
+<body>Test</body>
+</html>
+</lobeArtifact>
+\`\`\`
+Some text after`;
+    const output = processWithArtifact(input);
+    expect(output).toEqual(`Some text before
+<lobeThinking>Test thinking</lobeThinking>
+<lobeArtifact identifier="test" type="text/html" title="Test"><!DOCTYPE html><html><body>Test</body></html></lobeArtifact>
+Some text after`);
+  });
+  it('should handle code block with only lobeArtifact tag', () => {
+    const input = `\`\`\`html
+<lobeArtifact identifier="test" type="text/html" title="Test">
+<!DOCTYPE html>
+<html>
+<body>Test</body>
+</html>
+</lobeArtifact>
+\`\`\``;
+    const output = processWithArtifact(input);
+    expect(output).toEqual(
+      `<lobeArtifact identifier="test" type="text/html" title="Test"><!DOCTYPE html><html><body>Test</body></html></lobeArtifact>`,
+    );
+  });
+  it('should handle code block with surrounding text and both lobeThinking and lobeArtifact', () => {
+    const input = `---
+\`\`\`tool_code
+<lobeThinking>The user reported a \`SyntaxError\` in the browser console, indicating a problem with the JavaScript code in the calculator artifact. The error message "Identifier 'display' has already been declared" suggests a variable naming conflict. I need to review the JavaScript code and correct the issue. This is an update to the existing "calculator-web-artifact" artifact.</lobeThinking>
+<lobeArtifact identifier="calculator-web-artifact" type="text/html" title="Simple Calculator">
+<!DOCTYPE html>
+<html lang="en">
+...
+</html>
+</lobeArtifact>
+\`\`\`
+I've updated the calculator artifact. The issue was a naming conflict with the \`display\` variable. I've renamed the input element's ID to \`calc-display\` and the JavaScript variable to \`displayElement\` to avoid the conflict. The calculator should now function correctly.
+---`;
+    const output = processWithArtifact(input);
+    expect(output).toEqual(`---
+<lobeThinking>The user reported a \`SyntaxError\` in the browser console, indicating a problem with the JavaScript code in the calculator artifact. The error message "Identifier 'display' has already been declared" suggests a variable naming conflict. I need to review the JavaScript code and correct the issue. This is an update to the existing "calculator-web-artifact" artifact.</lobeThinking>
+<lobeArtifact identifier="calculator-web-artifact" type="text/html" title="Simple Calculator"><!DOCTYPE html><html lang="en">...</html></lobeArtifact>
+I've updated the calculator artifact. The issue was a naming conflict with the \`display\` variable. I've renamed the input element's ID to \`calc-display\` and the JavaScript variable to \`displayElement\` to avoid the conflict. The calculator should now function correctly.
+---`);
+  });
+  it('should handle code block before lobeThinking and lobeArtifact', () => {
+    const input = `
+Okay, I'll create a temperature converter with the logic wrapped in an IIFE and event listeners attached in Javascript.
+\`\`\`html
+<!DOCTYPE html>
+<html lang="en">
+...
+</html>
+\`\`\`
+<lobeThinking>This is a good candidate for an artifact. It's a self-contained HTML document with embedded JavaScript that provides a functional temperature converter. It's more than a simple code snippet and can be reused or modified. This is a new request, so I'll create a new artifact with the identifier "temperature-converter".</lobeThinking>
+<lobeArtifact identifier="temperature-converter" type="text/html" title="Temperature Converter">
+\`\`\`html
+<!DOCTYPE html>
+<html lang="en">
+...
+</html>
+\`\`\`
+</lobeArtifact>
+This HTML document includes the temperature converter with the requested features: the logic is wrapped in an IIFE, and event listeners are attached in JavaScript.
+`;
+    const output = processWithArtifact(input);
+    expect(output)
+      .toEqual(`Okay, I'll create a temperature converter with the logic wrapped in an IIFE and event listeners attached in Javascript.
+\`\`\`html
+<!DOCTYPE html>
+<html lang="en">
+...
+</html>
+\`\`\`
+<lobeThinking>This is a good candidate for an artifact. It's a self-contained HTML document with embedded JavaScript that provides a functional temperature converter. It's more than a simple code snippet and can be reused or modified. This is a new request, so I'll create a new artifact with the identifier "temperature-converter".</lobeThinking>
+<lobeArtifact identifier="temperature-converter" type="text/html" title="Temperature Converter"><!DOCTYPE html><html lang="en">...</html></lobeArtifact>
+This HTML document includes the temperature converter with the requested features: the logic is wrapped in an IIFE, and event listeners are attached in JavaScript.`);
+  });
 });

package/src/features/Conversation/components/ChatItem/utils.ts CHANGED Viewed

@@ -4,24 +4,55 @@ import { ARTIFACT_TAG_REGEX, ARTIFACT_THINKING_TAG_REGEX } from '@/const/plugin'
  * Replace all line breaks in the matched `lobeArtifact` tag with an empty string
  */
 export const processWithArtifact = (input: string = '') => {
-  let output = input;
-  const thinkMatch = ARTIFACT_THINKING_TAG_REGEX.exec(input);
+  // First remove outer fenced code block if it exists
+  let output = input.replace(
+    /^([\S\s]*?)\s*```[^\n]*\n((?:<lobeThinking>[\S\s]*?<\/lobeThinking>\s*\n\s*)?<lobeArtifact[\S\s]*?<\/lobeArtifact>\s*)\n```\s*([\S\s]*?)$/,
+    (_, before = '', content, after = '') => {
+      return [before.trim(), content.trim(), after.trim()].filter(Boolean).join('\n\n');
+    },
+  );
+  const thinkMatch = ARTIFACT_THINKING_TAG_REGEX.exec(output);
   // If the input contains the `lobeThinking` tag, replace all line breaks with an empty string
-  if (thinkMatch)
-    output = input.replace(ARTIFACT_THINKING_TAG_REGEX, (match) =>
+  if (thinkMatch) {
+    output = output.replace(ARTIFACT_THINKING_TAG_REGEX, (match) =>
       match.replaceAll(/\r?\n|\r/g, ''),
     );
+  }
-  const match = ARTIFACT_TAG_REGEX.exec(input);
+  // Add empty line between lobeThinking and lobeArtifact if they are adjacent
+  output = output.replace(/(<\/lobeThinking>)\r?\n(<lobeArtifact)/, '$1\n\n$2');
+  // Remove fenced code block between lobeArtifact and HTML content
+  output = output.replace(
+    /(<lobeArtifact[^>]*>)\s*```[^\n]*\n([\S\s]*?)(```\n)?(<\/lobeArtifact>)/,
+    (_, start, content, __, end) => {
+      if (content.trim().startsWith('<!DOCTYPE html') || content.trim().startsWith('<html')) {
+        return start + content.trim() + end;
+      }
+      return start + content + (__ || '') + end;
+    },
+  );
+  // Keep existing code blocks that are not part of lobeArtifact
+  output = output.replace(
+    /^([\S\s]*?)(<lobeThinking>[\S\s]*?<\/lobeThinking>\s*\n\s*<lobeArtifact[\S\s]*?<\/lobeArtifact>)([\S\s]*?)$/,
+    (_, before, content, after) => {
+      return [before.trim(), content.trim(), after.trim()].filter(Boolean).join('\n\n');
+    },
+  );
+  const match = ARTIFACT_TAG_REGEX.exec(output);
   // If the input contains the `lobeArtifact` tag, replace all line breaks with an empty string
-  if (match)
-    return output.replace(ARTIFACT_TAG_REGEX, (match) => match.replaceAll(/\r?\n|\r/g, ''));
+  if (match) {
+    output = output.replace(ARTIFACT_TAG_REGEX, (match) => match.replaceAll(/\r?\n|\r/g, ''));
+  }
   // if not match, check if it's start with <lobeArtifact but not closed
   const regex = /<lobeArtifact\b(?:(?!\/?>)[\S\s])*$/;
   if (regex.test(output)) {
-    return output.replace(regex, '<lobeArtifact>');
+    output = output.replace(regex, '<lobeArtifact>');
   }
   return output;

package/src/features/Conversation/components/MarkdownElements/LobeArtifact/rehypePlugin.test.ts ADDED Viewed

@@ -0,0 +1,125 @@
+import { describe, expect, it } from 'vitest';
+import rehypePlugin from './rehypePlugin';
+describe('rehypePlugin', () => {
+  it('should transform <lobeArtifact> tags with attributes', () => {
+    const tree = {
+      type: 'root',
+      children: [
+        {
+          type: 'element',
+          tagName: 'p',
+          children: [
+            {
+              type: 'raw',
+              value: '<lobeArtifact identifier="test-id" type="image/svg+xml" title="Test Title">',
+            },
+            { type: 'text', value: 'Artifact content' },
+            { type: 'raw', value: '</lobeArtifact>' },
+          ],
+        },
+      ],
+    };
+    const expectedTree = {
+      type: 'root',
+      children: [
+        {
+          type: 'element',
+          tagName: 'lobeArtifact',
+          properties: {
+            identifier: 'test-id',
+            type: 'image/svg+xml',
+            title: 'Test Title',
+          },
+          children: [{ type: 'text', value: 'Artifact content' }],
+        },
+      ],
+    };
+    const plugin = rehypePlugin();
+    plugin(tree);
+    expect(tree).toEqual(expectedTree);
+  });
+  it('should handle mixed content with thinking tags and plain text', () => {
+    const tree = {
+      type: 'root',
+      children: [
+        {
+          type: 'element',
+          tagName: 'p',
+          children: [{ type: 'text', value: 'Initial plain text paragraph' }],
+        },
+        {
+          type: 'element',
+          tagName: 'p',
+          children: [
+            { type: 'raw', value: '<lobeThinking>' },
+            { type: 'text', value: 'AI is thinking...' },
+            { type: 'raw', value: '</lobeThinking>' },
+          ],
+        },
+        {
+          type: 'element',
+          tagName: 'p',
+          children: [
+            {
+              type: 'raw',
+              value: '<lobeArtifact identifier="test-id" type="image/svg+xml" title="Test Title">',
+            },
+            { type: 'text', value: 'Artifact content' },
+            { type: 'raw', value: '</lobeArtifact>' },
+          ],
+        },
+        {
+          type: 'element',
+          tagName: 'p',
+          children: [{ type: 'text', value: 'Final plain text paragraph' }],
+        },
+      ],
+    };
+    const expectedTree = {
+      type: 'root',
+      children: [
+        {
+          type: 'element',
+          tagName: 'p',
+          children: [{ type: 'text', value: 'Initial plain text paragraph' }],
+        },
+        {
+          type: 'element',
+          tagName: 'p',
+          children: [
+            { type: 'raw', value: '<lobeThinking>' },
+            { type: 'text', value: 'AI is thinking...' },
+            { type: 'raw', value: '</lobeThinking>' },
+          ],
+        },
+        {
+          type: 'element',
+          tagName: 'lobeArtifact',
+          properties: {
+            identifier: 'test-id',
+            type: 'image/svg+xml',
+            title: 'Test Title',
+          },
+          children: [{ type: 'text', value: 'Artifact content' }],
+        },
+        {
+          type: 'element',
+          tagName: 'p',
+          children: [{ type: 'text', value: 'Final plain text paragraph' }],
+        },
+      ],
+    };
+    const plugin = rehypePlugin();
+    plugin(tree);
+    expect(tree).toEqual(expectedTree);
+  });
+});

package/src/features/DevPanel/CacheViewer/DataTable/index.tsx ADDED Viewed

@@ -0,0 +1,33 @@
+'use client';
+import { RefreshCw } from 'lucide-react';
+import { memo } from 'react';
+import Header from '../../features/Header';
+import Table from '../../features/Table';
+import { useCachePanelContext } from '../cacheProvider';
+const DataTable = memo(() => {
+  const { entries, isLoading, refreshData } = useCachePanelContext();
+  return (
+    <>
+      <Header
+        actions={[
+          {
+            icon: RefreshCw,
+            onClick: () => refreshData(),
+            title: 'Refresh',
+          },
+        ]}
+        title="Cache Entries"
+      />
+      <Table
+        columns={['url', 'headers.content-type', 'body', 'kind', 'tags', 'revalidate', 'timestamp']}
+        dataSource={entries}
+        loading={isLoading}
+      />
+    </>
+  );
+});
+export default DataTable;

package/src/features/DevPanel/CacheViewer/cacheProvider.tsx ADDED Viewed

@@ -0,0 +1,64 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import {
+  PropsWithChildren,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useTransition,
+} from 'react';
+import { getCacheFiles } from './getCacheEntries';
+import type { NextCacheFileData } from './schema';
+interface CachePanelContextProps {
+  entries: NextCacheFileData[];
+  isLoading: boolean;
+  refreshData: () => void;
+  setEntries: (value: NextCacheFileData[]) => void;
+}
+const CachePanelContext = createContext<CachePanelContextProps>({
+  entries: [],
+  isLoading: false,
+  refreshData: () => {},
+  setEntries: () => {},
+});
+export const useCachePanelContext = () => useContext(CachePanelContext);
+export const CachePanelContextProvider = (
+  props: PropsWithChildren<{
+    entries: NextCacheFileData[];
+  }>,
+) => {
+  const [isLoading, startTransition] = useTransition();
+  const [entries, setEntries] = useState(props.entries);
+  const pathname = usePathname();
+  const refreshData = () => {
+    startTransition(async () => {
+      const files = await getCacheFiles();
+      setEntries(files ?? []);
+    });
+  };
+  useEffect(() => {
+    refreshData();
+  }, [pathname]);
+  return (
+    <CachePanelContext.Provider
+      value={{
+        entries,
+        isLoading,
+        refreshData,
+        setEntries,
+      }}
+    >
+      {props.children}
+    </CachePanelContext.Provider>
+  );
+};

package/src/features/DevPanel/CacheViewer/getCacheEntries.ts ADDED Viewed

@@ -0,0 +1,52 @@
+'use server';
+import { existsSync, promises } from 'node:fs';
+import pMap from 'p-map';
+import { ZodError } from 'zod';
+import { type NextCacheFileData, nextCacheFileSchema } from './schema';
+const cachePath = '.next/cache/fetch-cache';
+export const getCacheFiles = async (): Promise<NextCacheFileData[]> => {
+  if (!existsSync(cachePath)) {
+    return [];
+  }
+  const files = await promises.readdir(cachePath);
+  let result: NextCacheFileData[] = (await pMap(files, async (file) => {
+    // ignore tags-manifest file
+    if (/manifest/.test(file)) return false;
+    try {
+      const fileContent = await promises.readFile(`${cachePath}/${file}`).catch((err) => {
+        throw new Error(`Error reading file ${file}`, {
+          cause: err,
+        });
+      });
+      const fileStats = await promises.stat(`${cachePath}/${file}`).catch((err) => {
+        throw new Error(`Error reading file ${file}`, {
+          cause: err,
+        });
+      });
+      const jsonData = JSON.parse(fileContent.toString());
+      return nextCacheFileSchema.parse({
+        ...jsonData,
+        id: file,
+        timestamp: new Date(fileStats.birthtime),
+      });
+    } catch (error) {
+      if (error instanceof ZodError) {
+        const issues = error.issues;
+        console.error(`File ${file} do not match the schema`, issues);
+      }
+      console.error(`Error parsing ${file}`);
+      return false;
+    }
+  })) as NextCacheFileData[];
+  result = result.filter(Boolean) as NextCacheFileData[];
+  return result.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
+};

package/src/features/DevPanel/CacheViewer/index.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import { Empty } from 'antd';
+import { Center } from 'react-layout-kit';
+import DataTable from './DataTable';
+import { CachePanelContextProvider } from './cacheProvider';
+import { getCacheFiles } from './getCacheEntries';
+const CacheViewer = async () => {
+  const files = await getCacheFiles();
+  if (!files || files.length === 0)
+    return (
+      <Center height={'80%'}>
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </Center>
+    );
+  return (
+    <CachePanelContextProvider entries={files}>
+      <DataTable />
+    </CachePanelContextProvider>
+  );
+};
+export default CacheViewer;