-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #14 from AElfProject/release/v0.1.5
feat: 🎸 optimize style; integrate chainGPT;
- Loading branch information
Showing
46 changed files
with
1,365 additions
and
194 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 53 additions & 0 deletions
53
lib/generator/templates/src/app/api/demos/chaingpt/route.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import type {NextRequest} from "next/server"; | ||
| import {NextResponse} from "next/server"; | ||
| import {Errors, GeneralChat} from '@chaingpt/generalchat'; | ||
| import { setTimeout } from 'node:timers/promises' | ||
|
|
||
| console.log('CHAINGPT_API_KEY: ', process.env.CHAINGPT_API_KEY); | ||
| const generalchat = new GeneralChat({ | ||
| apiKey: process.env.CHAINGPT_API_KEY as string, | ||
| }); | ||
|
|
||
| interface Context { | ||
| params: undefined; | ||
| } | ||
|
|
||
| async function chainGPTChat(question: string) { | ||
| return new Promise(async (resolve, reject) => { | ||
| try { | ||
| console.log('generalchat', question, process.env.CHAINGPT_API_KEY); | ||
| const stream = await generalchat.createChatStream({ | ||
| question: question, // 'Explain quantum computing in simple terms', | ||
| chatHistory: "off" | ||
| }); | ||
| let data = ''; | ||
| stream.on('data', (chunk: any) => { | ||
| console.log(chunk.toString()); | ||
| data += chunk.toString(); | ||
| }); | ||
| stream.on('end', () => { | ||
| console.log("Stream ended"); | ||
| resolve(data); | ||
| }); | ||
| } catch (error) { | ||
| console.log('error:', error); | ||
| if (error instanceof Errors.GeneralChatError) { | ||
| reject(error.message); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| export async function POST(request: NextRequest, context: Context) { | ||
| const body: { question: string } = await request.json(); | ||
| const { question = '' } = body; | ||
| console.log('process.env.CHAINGPT_API_KEY', process.env.CHAINGPT_API_KEY); | ||
| try { | ||
| // const data = await chainGPTChat(question); | ||
| await setTimeout(1000); | ||
| const data = 'hello world'; | ||
| return NextResponse.json({ code: 0, data }); | ||
| } catch (error) { | ||
| return NextResponse.json({ code: -1, error: error }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
lib/generator/templates/src/app/demos/chaingpt/components/AnswerBox.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| export function AnswerBox({ | ||
| children, | ||
| className | ||
| }: { | ||
| children: React.ReactNode, | ||
| className?: string | ||
| }) { | ||
| return <div className={`w-auto h-auto flex flex-col items-start mb-4 ${className}`}> | ||
| <div className="w-auto h-auto lg:text-base text-sm p-2 px-4"> | ||
| {children} | ||
| </div> | ||
| </div> | ||
| } |
11 changes: 11 additions & 0 deletions
11
lib/generator/templates/src/app/demos/chaingpt/components/QuestionBox.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| export function QuestionBox({ | ||
| children, // will be a page or nested layout | ||
| }: { | ||
| children: React.ReactNode | ||
| }) { | ||
| return <div className="w-full h-auto flex flex-col items-end mb-4"> | ||
| <div className="w-auto h-auto lg:text-base text-sm border border-gray-100 rounded-3xl p-2 px-4 bg-gray-100"> | ||
| {children} | ||
| </div> | ||
| </div> | ||
| } |
118 changes: 118 additions & 0 deletions
118
lib/generator/templates/src/app/demos/chaingpt/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| "use client" | ||
| /** | ||
| * <AntdRegistry> | ||
| * If you are using the App Router in Next.js and using antd as your component library, | ||
| * to make the antd component library work better in your Next.js application and provide a better user experience, | ||
| * you can try using the following method to extract | ||
| * and inject antd's first-screen styles into HTML to avoid page flicker. | ||
| * https://ant.design/docs/react/use-with-next | ||
| **/ | ||
| import { Input, Spin } from 'antd'; | ||
| const { Search } = Input; | ||
| import { QuestionBox } from '@/app/demos/chaingpt/components/QuestionBox'; | ||
| import { AnswerBox } from '@/app/demos/chaingpt/components/AnswerBox'; | ||
| import {useEffect, useRef, useState} from 'react'; | ||
|
|
||
| interface IChatItem { | ||
| text: string; | ||
| type: 'question' | 'answer'; | ||
| } | ||
|
|
||
| const defaultList: IChatItem[] = [{"text":"the current price of ELF","type":"question"},{"text":"The current price of ELF (aelf) is $0.3994312670003399. Please note that cryptocurrency prices are highly volatile and can change rapidly. It's always a good idea to check the latest prices on a reliable cryptocurrency exchange or market data platform. Let me know if there's anything else I can help you with!","type":"answer"}]; | ||
|
|
||
| // TODO: Virtual list to hold the messages | ||
| // import VirtualList from 'rc-virtual-list'; | ||
| export default function Page() { | ||
| const [chatList, setChainList] = useState<IChatItem[]>(defaultList); | ||
| const [searchDisable, setSearchDisable] = useState(false); | ||
| const [searchInput, setSearchInput] = useState(''); | ||
|
|
||
| const onSearch = async (value: string) => { | ||
| console.log('value: ', value); | ||
| if (value.trim().length <= 0) { | ||
| return; | ||
| } | ||
| const question: IChatItem = { | ||
| text: value, | ||
| type: 'question' | ||
| }; | ||
| const _list = [...chatList, question]; | ||
| setChainList(_list); | ||
| setSearchDisable(true); | ||
|
|
||
| const askChainGPT = async (question: string) => { | ||
| const url = '/api/demos/chaingpt'; | ||
| let data; | ||
|
|
||
| const response = await fetch(url, { | ||
| method: "POST", | ||
| body: JSON.stringify({ question }), | ||
| }); | ||
| if (!response.ok) { | ||
| throw new Error(`Response status: ${response.status}`); | ||
| } | ||
|
|
||
| const json = await response.json(); | ||
| console.log(json); | ||
| data = json.data; | ||
| return data; | ||
| }; | ||
| let answerMessage; | ||
| try { | ||
| answerMessage = await askChainGPT(value); | ||
| setSearchInput(''); | ||
| } catch (error) { | ||
| answerMessage = error instanceof Error ? error.message : 'Please try again'; | ||
| } | ||
| const answer: IChatItem = { | ||
| text: answerMessage, | ||
| type: 'answer' | ||
| }; | ||
| setChainList([..._list, answer]); | ||
| setSearchDisable(false); | ||
| }; | ||
|
|
||
| console.log('chatList', chatList, JSON.stringify(chatList)); | ||
| const bottomRef = useRef<null | HTMLDivElement>(null); | ||
| useEffect(() => { | ||
| if (bottomRef.current) { | ||
| bottomRef.current.scrollIntoView({ behavior: "smooth" }); | ||
| } | ||
| }, [chatList]); | ||
|
|
||
| return <> | ||
| <div className="w-full h-full flex flex-col bg-white"> | ||
| <div className="w-full h-full overflow-hidden"> | ||
| <div className="w-full h-full flex-1 overflow-scroll"> | ||
| <div className="w-full p-4 whitespace-pre-wrap break-normal text-wrap"> | ||
| {/*<QuestionBox>Hello World</QuestionBox>*/} | ||
| {/*<AnswerBox>Hello World hzz! aelf addresses interoperability with other blockchain networks through its multi-chain architecture and cross-chain communication protocols.*/} | ||
| {/* The aelf blockchain is designed to support seamless communication and data exchange between different blockchains. It achieves this by implementing a main chain and multiple side chains. The main chain handles general functions and acts as a bridge between the side chains. Each side chain is dedicated to specific applications or business scenarios, allowing for better scalability and performance.</AnswerBox>*/} | ||
| {/*<QuestionBox>Hello World 2331111</QuestionBox>*/} | ||
| {/*<QuestionBox>Hello World</QuestionBox>*/} | ||
| {/*<AnswerBox>Hello World hzz! aelf addresses interoperability with other blockchain networks through its multi-chain architecture and cross-chain communication protocols.*/} | ||
| {/* The aelf blockchain is designed to support seamless communication and data exchange between different blockchains. It achieves this by implementing a main chain and multiple side chains. The main chain handles general functions and acts as a bridge between the side chains. Each side chain is dedicated to specific applications or business scenarios, allowing for better scalability and performance.</AnswerBox>*/} | ||
| {/*<QuestionBox>Hello World 2331111</QuestionBox>*/} | ||
| {chatList.map((item, index) => ( | ||
| <div key={index}> | ||
| {item.type === 'question' ? <QuestionBox>{item.text}</QuestionBox> : <AnswerBox>{item.text}</AnswerBox>} | ||
| </div> | ||
| ))} | ||
| <AnswerBox className={searchDisable ? 'block' : 'hidden'}><Spin spinning={searchDisable}/></AnswerBox> | ||
| <div ref={bottomRef}></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="p-4"> | ||
| <Search | ||
| allowClear | ||
| disabled={searchDisable} | ||
| loading={searchDisable} | ||
| value={searchInput} | ||
| onChange={(e) => setSearchInput(e.target.value)} | ||
| onSearch={onSearch} | ||
| placeholder="Please input your question" /> | ||
| </div> | ||
| </div> | ||
| </> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,24 @@ | ||
| import Link from 'next/link'; | ||
| import NavLinks from '@/app/ui/demos/nav-links/page'; | ||
| import {NickNameItem} from '@/app/demos/redux/nickName/NickNameItem'; | ||
| import {WalletConnectItem} from '@/app/demos/redux/walletConnect/WalletConnectItem'; | ||
| import Footer from '@/components/Footer'; | ||
|
|
||
| function SideBarItem ({ | ||
| children, // will be a page or nested layout | ||
| }: { | ||
| children: React.ReactNode | ||
| }) { | ||
| return <div className="border-b border-b-indigo-500"> | ||
| {children} | ||
| </div> | ||
| } | ||
| import { menuList} from '@/config/demo/configMenu'; | ||
| import { MenuCustom } from '@/components/demo/Menu'; | ||
|
|
||
| export default function HelloLayout({ | ||
| children, // will be a page or nested layout | ||
| }: { | ||
| children: React.ReactNode | ||
| }) { | ||
| return ( | ||
| <section className="flex min-h-screen min-w-full break-all"> | ||
| {/* Include shared UI here e.g. a header or sidebar */} | ||
| {/*<nav></nav>*/} | ||
| <div className="hidden md:flex flex-col w-1/6 bg-indigo-300"> | ||
| <SideBarItem><Link href="/demos">demo home</Link></SideBarItem> | ||
| <SideBarItem><Link href="/demos?id=12345">demo home with search params</Link></SideBarItem> | ||
| <SideBarItem><Link href="/demos/tailwind">tailwind</Link></SideBarItem> | ||
| <SideBarItem><Link href="/demos/image">image desktop and mobile</Link></SideBarItem> | ||
| <SideBarItem><Link href="/demos/fonts">fonts</Link></SideBarItem> | ||
| <SideBarItem><Link href="/demos/sentry">sentry</Link></SideBarItem> | ||
| <SideBarItem><Link href="/demos/aelf-web3/sdk">aelf-web3 sdk</Link></SideBarItem> | ||
| <SideBarItem><Link href="/demos/aelf-design">aelf-design</Link></SideBarItem> | ||
| <SideBarItem><Link href="/demos/redux">Redux Toolkit</Link></SideBarItem> | ||
| <SideBarItem><Link href="/demos/file-upload">file-upload</Link></SideBarItem> | ||
| <SideBarItem><Link href="/demos/web-login">web login</Link></SideBarItem> | ||
| <SideBarItem><Link href="/demos/jest">jest</Link></SideBarItem> | ||
| <div> | ||
| <p>Show link path here</p> | ||
| <NavLinks /> | ||
| <section className="flex flex-col h-screen min-w-full break-all pt-[60px] lg:pt-[80px]"> | ||
| <div className="flex flex-1 overflow-scroll min-w-full"> | ||
| <div className="flex h-full min-w-full break-all"> | ||
| <div className="hidden md:flex flex-col lg:w-1/6 bg-white h-full"> | ||
| <MenuCustom menuList={menuList} /> | ||
| </div> | ||
| <div className="flex-initial lg:w-5/6 w-full h-full bg-white border-y-[1px] border-gray-100">{children}</div> | ||
| </div> | ||
| <NickNameItem/> | ||
| <WalletConnectItem/> | ||
| </div> | ||
| <div className="flex-initial w-5/6">{children}</div> | ||
| <Footer /> | ||
| </section> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| 'use client'; | ||
| import { io } from 'socket.io-client'; | ||
| import { Button } from 'antd' | ||
| import {useEffect, useState} from 'react'; | ||
| import {response} from 'express'; | ||
|
|
||
| export default function SocketPage() { | ||
| const [socket, setSocket] = useState<any>(); | ||
| const [answer, setAnswer] = useState<string>(''); | ||
|
|
||
| useEffect(() => { | ||
| if (!socket) { | ||
| return; | ||
| } | ||
| socket.on('answer-chain-gpt', (socketId: string, message: string) => { | ||
| console.log('answer-chain-gpt: ', socketId, message); | ||
| setAnswer(message); | ||
| }); | ||
| }, [socket]); | ||
|
|
||
| return <> | ||
| <p>Socket io demo.</p> | ||
| <Button onClick={() => { | ||
| const _socket = io({ | ||
| path: '/socket-io/' | ||
| }); | ||
| console.log('_socket: ', _socket); | ||
| setSocket(_socket); | ||
| _socket.on("connect", () => { | ||
| console.log(_socket); // x8WIv7-mJelg7on_ALbx | ||
| console.log('connect !!!'); | ||
| }); | ||
| }}>Connect</Button> | ||
| <Button onClick={() => { | ||
| console.log('Question: '); | ||
| socket.emit('question-chain-gpt', 'question socket case', (response: any) => { | ||
| console.log(response.status); | ||
| console.log(response.text); | ||
| setAnswer(response.text); | ||
| }); | ||
| }}>Question</Button> | ||
| <Button onClick={() => { | ||
| console.log('hello: '); | ||
| socket.emit("hello", "world"); | ||
| }}>Hello</Button> | ||
| <div>answer: </div> | ||
| <div>{answer}</div> | ||
| </> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.