docs(qwen): qwen next demo下首页渲染报错 (#46)

ant-design · Jan 18, 2024 · f3c2dd1 · f3c2dd1
1 parent 929fc66
commit f3c2dd1
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 66 deletions.
diff --git a/demos/chatgpt-nextjs/src/app/chatgpt/index.tsx b/demos/chatgpt-nextjs/src/app/chatgpt/index.tsx
@@ -1,30 +1,38 @@
 '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,
       }}
     >
-      <ProChat
-        style={{
-          height: '100vh',
-          width: '100vw',
-        }}
-        request={async (messages: Array<any>) => {
-          const response = await fetch('/api/openai', {
-            method: 'POST',
-            body: JSON.stringify({ messages: messages }),
-          });
-
-          return response;
-        }}
-      />
+      {
+        showComponent && <ProChat
+          style={{
+            height: '100vh',
+            width: '100vw',
+          }}
+          request={async (messages) => {
+            const response = await fetch('/api/qwen', {
+              method: 'POST',
+              body: JSON.stringify({ messages: messages }),
+            });
+            const data = await response.json();
+            return new Response(data.output?.text);
+          }}
+        />
+      }
     </div>
   );
 }
+
diff --git a/demos/qwen-nextjs/src/app/page.tsx b/demos/qwen-nextjs/src/app/page.tsx
@@ -1,30 +1,38 @@
 '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,
       }}
     >
-      <ProChat
-        style={{
-          height: '100vh',
-          width: '100vw',
-        }}
-        request={async (messages) => {
-          const response = await fetch('/api/qwen', {
-            method: 'POST',
-            body: JSON.stringify({ messages: messages }),
-          });
-          const data = await response.json();
-          return new Response(data.output?.text);
-        }}
-      />
+      {
+        showComponent && <ProChat
+          style={{
+            height: '100vh',
+            width: '100vw',
+          }}
+          request={async (messages) => {
+            const response = await fetch('/api/qwen', {
+              method: 'POST',
+              body: JSON.stringify({ messages: messages }),
+            });
+            const data = await response.json();
+            return new Response(data.output?.text);
+          }}
+        />
+      }
     </div>
   );
 }
+
diff --git a/docs/guide/chatgpt.md b/docs/guide/chatgpt.md
@@ -59,36 +59,44 @@ export const POST = async (request: Request) => {
 ## 界面
 
 ```ts
-"use client";
-
-import { ProChat } from "@ant-design/pro-chat";
-import { useTheme } from "antd-style";
+'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,
       }}
     >
-      <ProChat
-        style={{
-          height: "100vh",
-          width: "100vw",
-        }}
-        request={async (messages: Array<any>) => {
-          const response = await fetch("/api/openai", {
-            method: "POST",
-            body: JSON.stringify({ messages: messages }),
-          });
-
-          return response;
-        }}
-      />
+      {
+        showComponent && <ProChat
+          style={{
+            height: '100vh',
+            width: '100vw',
+          }}
+          request={async (messages) => {
+            const response = await fetch('/api/qwen', {
+              method: 'POST',
+              body: JSON.stringify({ messages: messages }),
+            });
+            const data = await response.json();
+            return new Response(data.output?.text);
+          }}
+        />
+      }
     </div>
   );
 }
+
 ```
 
 ### 完整的代码

diff --git a/docs/guide/qwen.md b/docs/guide/qwen.md
@@ -89,33 +89,40 @@ export async function POST(request: Request) {
 在你想要编写的页面上写入 ProChat 并拼接对应内容
 
 ```ts
-"use client";
-
-import { useTheme } from "antd-style";
-import { ProChat } from "@ant-design/pro-chat";
+'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,
       }}
     >
-      <ProChat
-        style={{
-          height: "100vh",
-          width: "100vw",
-        }}
-        request={async (messages) => {
-          const response = await fetch("/api/qwen", {
-            method: "POST",
-            body: JSON.stringify({ messages: messages }),
-          });
-          const data = await response.json();
-          return new Response(data.output?.text);
-        }}
-      />
+      {
+        showComponent && <ProChat
+          style={{
+            height: '100vh',
+            width: '100vw',
+          }}
+          request={async (messages) => {
+            const response = await fetch('/api/qwen', {
+              method: 'POST',
+              body: JSON.stringify({ messages: messages }),
+            });
+            const data = await response.json();
+            return new Response(data.output?.text);
+          }}
+        />
+      }
     </div>
   );
 }