添加国际化 (#106)

* 📝 docs: add en-US in guide * 📝 docs: fix hierarchy falut * 📝 docs: add en homepage * 🔥 chore: remove useless dep * ✅ chore: update snapshot * 🔥 chore: del useless file * ✨ feat: add locale to prochat * 🩹 fix: modify placeholder * ✅ chore: update snapshot * 📝 docs: add code title i18n * 📝 docs: opt en docs * ✅ chore: update snapshot * 💚 fix: fix test pass * ✅ chore: update snapshot --------- Co-authored-by: gaoyizhuo.gyz <[email protected]> Co-authored-by: ONLY-yours <[email protected]>
ant-design · Mar 15, 2024 · 48fae68 · 48fae68
1 parent b6aaaf7
commit 48fae68
Show file tree

Hide file tree

Showing 46 changed files with 2,213 additions and 342 deletions.
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -12,75 +12,14 @@ export default defineConfig({
       github: 'https://github.com/ant-design/pro-chat',
     },
     footer: 'Made with ❤️ by 蚂蚁集团 - AFX & 数字科技',
-    features: [
-      {
-        image:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/q48YQ5X4ytAAAAAAAAAAAAAAFl94AQBr',
-        title: '简单易用',
-        description: '在 Ant Design 上进行了自己的封装，更加易用',
-      },
-      {
-        image: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
-        title: 'Ant Design',
-        description: '与 Ant Design 设计体系一脉相承，无缝对接 antd 项目',
-      },
-      {
-        image:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/UKqDTIp55HYAAAAAAAAAAAAAFl94AQBr',
-        title: '大模型对话组件',
-        description: '内置对话模型常用的：数据编辑、重新发送、删除对话等这些默认的基本操作',
-      },
-
-      {
-        image:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Y_NMQKxw7OgAAAAAAAAAAAAAFl94AQBr',
-        title: '预设样式',
-        description: '样式风格与 antd 一脉相承，无需魔改，浑然天成。默认好用的主题系统',
-      },
-      {
-        image:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/U3XjS5IA1tUAAAAAAAAAAAAAFl94AQBr',
-        title: 'AI Friendly 的数据结构',
-        description:
-          '参照 ChatGPT、GLM、通义千问等市面上主流的大模型入参出参，减少前端开发者对这些入参和出参的处理',
-      },
-
-      {
-        image: 'https://gw.alipayobjects.com/zos/antfincdn/Eb8IHpb9jE/Typescript_logo_2020.svg',
-        title: 'TypeScript',
-        description: '使用 TypeScript 开发，提供完整的类型定义文件，无需频繁打开官网',
-      },
-    ],
     logo: 'https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*Mo27Sr3kS4kAAAAAAAAAAAAADmuEAQ/original',
-    hero: {
-      'zh-CN': {
-        title: 'ProEditor',
-        description: '🌟 通用编辑器 UI 框架',
-        actions: [
-          {
-            text: '快速开始 →',
-            link: '/guide/intro-start',
-          },
-          {
-            text: 'Github',
-            link: 'https://github.com/ant-design/pro-chat',
-          },
-        ],
-      },
-      'en-US': {
-        title: 'ProEditor',
-        description: '🌟 A General Editor UI Framework',
-        actions: [
-          {
-            text: 'Quick Start →',
-            link: '/guide/intro-start',
-          },
-        ],
-      },
-    },
   },
   mfsu: false,
   outputPath: 'docs-dist',
   html2sketch: {},
   extraBabelPlugins: ['antd-style'],
+  locales: [
+    { id: 'zh-CN', name: '中文' },
+    { id: 'en-US', name: 'EN' },
+  ],
 });
diff --git a/docs/changelog.en-US.md b/docs/changelog.en-US.md
@@ -0,0 +1,8 @@
+---
+title: Changelog
+nav:
+  title: Changelog
+  order: 999
+---
+
+<embed src="../CHANGELOG.md"></embed>
diff --git a/docs/guide/chatItemRenderConfig.en-US.md b/docs/guide/chatItemRenderConfig.en-US.md
@@ -0,0 +1,13 @@
+---
+title: Deep customization of conversation content
+order: 21
+group:
+  title: Use Cases
+nav:
+  title: Documents
+  order: 0
+---
+
+## Deep customization of conversation content
+
+> Working on Progress
diff --git a/docs/guide/chatRef.en-US.md b/docs/guide/chatRef.en-US.md
@@ -0,0 +1,9 @@
+---
+title: chatRef
+group:
+  title: Hooks
+  order: 100
+nav:
+  title: Documents
+  order: 0
+---
diff --git a/docs/guide/chatgpt.en-US.md b/docs/guide/chatgpt.en-US.md
@@ -0,0 +1,114 @@
+---
+title: ChatGPT
+group:
+  title: Model Case
+  order: 1000
+nav:
+  title: Documents
+  order: 0
+---
+
+# OpenAI-ChatGPT
+
+The following is the simplest ChatGPT access method, which uses a streaming interface. Non streaming interfaces will not be shown here, please refer to the Tongyi Qianwen side.
+
+## Project initialization
+
+A project created using NextJs
+
+We will use the Npm package provided by OpenAI for sending. Use Vercel's library to parse the returned data stream content. So you need to install these two packages first
+
+```bash
+npm install ai --save
+npm install openai --save
+
+# or use yarn 、bun、pnpm any else
+bun add ai
+bun add openai
+```
+
+> For the remaining NextJs configurations, refer to Tongyi Qianwen or Quick Start
+
+## Interface Coding
+
+We use Vercel's library to parse data streams without the need to manually configure the Reader ourselves
+
+> We need to combine role and content here because messages contain more content, but for ChatGPT, only these two contents are needed
+
+```ts
+import OpenAI from 'openai';
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+
+export const POST = async (request: Request) => {
+  const { messages = [] }: Partial<{ messages: Array<any> }> = await request.json();
+
+  const openai = new OpenAI({
+    apiKey: 'OpenAI Key',
+    baseURL: 'base url',
+  });
+
+  const PickMessages = messages.map((message) => {
+    return {
+      role: message.role,
+      content: message.content,
+    };
+  });
+
+  const response = await openai.chat.completions.create({
+    model: 'gpt-3.5-turbo',
+    messages: [...messages],
+    stream: true,
+  });
+
+  const stream = OpenAIStream(response);
+  return new StreamingTextResponse(stream);
+};
+```
+
+## UI
+
+```ts
+'use client';
+import { useState, useEffect } from 'react'
+import { ProChat } from '@ant-design/pro-chat';
+import { useTheme } from 'antd-style';
+
+export default function Home() {
+
+  const theme = useTheme();
+  const [showComponent, setShowComponent] = useState(false)
+
+  useEffect(() => setShowComponent(true), [])
+
+  return (
+    <div
+      style={{
+        backgroundColor: theme.colorBgLayout,
+      }}
+    >
+      {
+        showComponent && <ProChat
+          style={{
+            height: '100vh',
+            width: '100vw',
+          }}
+          request={async (messages) => {
+            const response = await fetch('/api/qwen', {
+              method: 'POST',
+              body: JSON.stringify({ messages: messages }),
+            });
+            return response
+            }}
+        />
+      }
+    </div>
+  );
+}
+
+```
+
+### Complete code
+
+See Github [ChatGPT-NextJs](https://github.com/ant-design/pro-chat/tree/main/demos/chatgpt-nextjs)
+
+> Remember to configure the API API's API key (or forwarding address) for OpenAI after installing the dependencies
diff --git a/docs/guide/docs.en-US.md b/docs/guide/docs.en-US.md
@@ -0,0 +1,13 @@
+---
+title: Details of Document Mode and Normal Mode
+order: 25
+group:
+  title: Use Cases
+nav:
+  title: Documents
+  order: 0
+---
+
+# Details of Document Mode and Normal Mode
+
+> Working on Progress
diff --git a/docs/guide/error.en-US.md b/docs/guide/error.en-US.md
@@ -0,0 +1,11 @@
+---
+title: Error handling
+order: 99
+group:
+  title: Get Started
+  order: 2
+---
+
+# Error handling
+
+> Working on Progress
diff --git a/docs/guide/initial.en-US.md b/docs/guide/initial.en-US.md
@@ -0,0 +1,105 @@
+---
+title: Initialize correctly
+order: 12
+group:
+  title: Use Cases
+nav:
+  title: Documents
+  order: 0
+---
+
+# Initialize correctly
+
+Before using the ProChat component, we need to understand some APIs related to initialization
+
+These APIs may differ slightly in details, so attention should be paid to the details
+
+## Hello message
+
+`helloMessage` is a customizable greeting message that will disappear after the next message is sent. It supports passing in content of ReactNode type, which can be text, links, or other custom formats. For example:
+
+```tsx
+import { ProChat } from '@ant-design/pro-chat';
+import { useTheme } from 'antd-style';
+export default () => {
+  const theme = useTheme();
+  return (
+    <div style={{ background: theme.colorBgLayout }}>
+      <ProChat
+        helloMessage={
+          'This is a custom message that supports Markdown messages, such as：[ProChat](https://github.com/ant-design/pro-chat)'
+        }
+      />
+    </div>
+  );
+};
+```
+
+In the above example, we passed in a custom message with a Markdown formatted link as a greeting. Of course, you can pass in ReactNode to customize the greeting message, but remember that the greeting message will disappear after the next request is sent.
+
+## Initialize data
+
+`initialChats` is a property used to initialize chat data. By setting `initialChats`，We can load the previously saved chat records and display them in the ProChat component. The example code is as follows:
+
+```tsx
+import { ProChat } from '@ant-design/pro-chat';
+import { useTheme } from 'antd-style';
+import { example } from './demos/mocks/fullFeature';
+
+export default () => {
+  const theme = useTheme();
+  return (
+    <div style={{ background: theme.colorBgLayout }}>
+      <ProChat initialChats={example.initialChats} />
+    </div>
+  );
+};
+```
+
+In the above code, we pass `example.chats` as the initial chat data to the ProChat component. Note that when using this attribute, it is necessary to provide the initial chat data in the correct format.
+
+## Using a skeleton screen
+
+When the data is not ready yet, the `loading` attribute can be used to display the skeleton screen as a placeholder. The example code is as follows:
+
+```tsx
+import { ProChat } from '@ant-design/pro-chat';
+import { Button, Divider } from 'antd';
+import { useTheme } from 'antd-style';
+import { useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { example } from './demos/mocks/fullFeature';
+
+export default () => {
+  const [loading, setLoading] = useState(true);
+  const theme = useTheme();
+
+  const [chats, setChats] = useState(example.initialChats);
+
+  return (
+    <Flexbox style={{ background: theme.colorBgLayout }}>
+      <Flexbox padding={16} gap={16} horizontal>
+        <Button
+          type={'primary'}
+          onClick={() => {
+            setLoading(false);
+          }}
+        >
+          Loading completed
+        </Button>
+        <Button
+          onClick={() => {
+            setLoading(true);
+          }}
+        >
+          Start loading
+        </Button>
+      </Flexbox>
+      <Divider />
+      <ProChat loading={loading} chats={chats} />
+    </Flexbox>
+  );
+};
+```
+
+In the above code, we pass the `loading` variable to the `loading` attribute to control whether the skeleton screen is displayed. After the data is ready, you can set `loading` to 'false' and the skeleton screen will disappear.