feat: playground
This commit is contained in:
jialin
@@ -7,9 +7,7 @@ const Dashboard: React.FC = () => {
|
||||
return (
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
title: 'Dashboard',
|
||||
}}
|
||||
|
||||
>
|
||||
<Access accessible={access.canSeeAdmin}>
|
||||
<Button type="primary">只有 Admin 可以看到这个按钮</Button>
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
.chatEmpty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 200px;
|
||||
flex-direction: column;
|
||||
.logo {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
margin-block: 20px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.chatContent {
|
||||
width: max(50%, 500px);
|
||||
}
|
||||
.chatMessageItem {
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding-inline: 44px 16px;
|
||||
.name {
|
||||
padding-block: 8px 16px;
|
||||
}
|
||||
.content {
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--border-radius-base);
|
||||
background-color: var(--color-fill-3);
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
.contentWrap {
|
||||
position: relative;
|
||||
padding-right: 45px;
|
||||
&:hover .edit {
|
||||
display: block;
|
||||
}
|
||||
.edit {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
.img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import { Button,Space,Tooltip} from "antd";
|
||||
import { EditOutlined, CopyOutlined,DislikeOutlined,SyncOutlined} from '@ant-design/icons';
|
||||
import ChatEmpty from "./chatEmpty";
|
||||
import chatStyle from './chat-style.less'
|
||||
import avatar from '@/assets/images/avatar.png'
|
||||
import logo from '@/assets/images/logo.png'
|
||||
|
||||
export type ChatContentProps = {
|
||||
messageList: any[];
|
||||
}
|
||||
|
||||
const QuestionMessage:React.FC<{content: string;}> = ({content}) => {
|
||||
return (
|
||||
<div className={chatStyle.chatMessageItem}>
|
||||
<span className={chatStyle.img}>
|
||||
<img src={avatar} alt="" />
|
||||
</span>
|
||||
|
||||
<span className={chatStyle.name}>YOU</span>
|
||||
<div className={chatStyle.contentWrap}>
|
||||
<span className={chatStyle.edit}><Button type="text" size="middle" icon={<EditOutlined />}></Button></span>
|
||||
<p className={chatStyle.content}>{content}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const AnswerMessage:React.FC<{content: string;}> = ({content}) => {
|
||||
return (
|
||||
<div className={chatStyle.chatMessageItem}>
|
||||
<span className={chatStyle.img}>
|
||||
<img src={logo} alt="" />
|
||||
</span>
|
||||
<span className={chatStyle.name}>AI</span>
|
||||
<p className={chatStyle.content}>{content}</p>
|
||||
<Space>
|
||||
<Tooltip title="复制">
|
||||
<Button type="text" size="middle" icon={<CopyOutlined />}></Button>
|
||||
</Tooltip>
|
||||
<Tooltip title="复制">
|
||||
<Button type="text" size="middle" icon={<SyncOutlined />}></Button>
|
||||
</Tooltip>
|
||||
<Tooltip title="回答错误">
|
||||
<Button type="text" size="middle" icon={<DislikeOutlined />}></Button>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const ChatContent:React.FC<ChatContentProps> = ({ messageList }) => {
|
||||
if (messageList.length === 0) {
|
||||
return <ChatEmpty/>
|
||||
}
|
||||
return (<div className={chatStyle.chatContent}>
|
||||
<QuestionMessage content="hello"></QuestionMessage>
|
||||
<AnswerMessage content="hello, nice to meet you!"></AnswerMessage>
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default ChatContent;
|
||||
@@ -0,0 +1,15 @@
|
||||
import Logo from '@/assets/images/logo.png';
|
||||
import chatStyle from './chat-style.less'
|
||||
|
||||
const ChatEmpty:React.FC = () => {
|
||||
return (
|
||||
<div className={chatStyle.chatEmpty}>
|
||||
<div className={chatStyle.logo}>
|
||||
<img src={Logo} alt="chat empty" />
|
||||
</div>
|
||||
<h3 className={chatStyle.tips}>How can I help you today?</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChatEmpty;
|
||||
@@ -0,0 +1,63 @@
|
||||
.ant-pro-footer-bar {
|
||||
padding-block: 20px;
|
||||
padding-bottom: 30px;
|
||||
border:none;
|
||||
.ant-pro-footer-bar-right {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.messageInput{
|
||||
position:relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: max(50%, 500px);
|
||||
background-color: var(--color-fill-1);
|
||||
border-radius: 30px;
|
||||
padding-right: 50px;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
&:focus-within {
|
||||
border-color: var(--ant-input-active-border-color);
|
||||
box-shadow: var(--ant-input-active-shadow);
|
||||
background-color: var(--color-white-1);
|
||||
transition: all 0.2s ease;
|
||||
&:hover {
|
||||
background-color: var(--color-white-1);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--ant-color-fill-secondary);
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
textarea {
|
||||
padding: 16px;
|
||||
border-radius: 30px;
|
||||
background-color:transparent;
|
||||
}
|
||||
textarea::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
textarea::-webkit-scrollbar-track {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
textarea::-webkit-scrollbar-thumb {
|
||||
background-color: #d9d9d9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.send-btn {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 11px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Input,Button} from 'antd';
|
||||
import { useState } from 'react';
|
||||
import { SendOutlined } from '@ant-design/icons';
|
||||
import './message-input.less'
|
||||
|
||||
const MessageInput: React.FC = () => {
|
||||
const { TextArea } = Input;
|
||||
const [message, setMessage] = useState('')
|
||||
const handleInputChange = (value:string) => {
|
||||
setMessage(value)
|
||||
}
|
||||
const handleSendMessage = () => {
|
||||
console.log('send message:', message)
|
||||
}
|
||||
const SendButton: React.FC = () => {
|
||||
return <Button type="primary" shape="circle" size="middle" icon={<SendOutlined />} onClick={() => handleSendMessage()}></Button>
|
||||
}
|
||||
return (
|
||||
<div className="messageInput">
|
||||
<TextArea placeholder='send your message' autoSize={{minRows: 1,maxRows: 6}} onChange={e => handleInputChange(e.target.value)} value={message} size="large" variant='borderless'></TextArea>
|
||||
<span className="send-btn"><SendButton/></span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MessageInput;
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Form } from "antd";
|
||||
import { useState } from "react";
|
||||
|
||||
const ParamsSettings:React.FC = () => {
|
||||
const [params, setParams] = useState({
|
||||
name: 'jack',
|
||||
age: 18
|
||||
});
|
||||
|
||||
return (<Form></Form>)
|
||||
};
|
||||
|
||||
export default ParamsSettings;
|
||||
@@ -1,16 +1,59 @@
|
||||
import { useState,useEffect} from 'react';
|
||||
import { Button, Select,Space,Input,Popover } from 'antd';
|
||||
import { ControlOutlined } from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import SealInput from '@/components/seal-form/seal-input';
|
||||
import MessageInput from './components/messageInput';
|
||||
import ChatContent from './components/chatContent';
|
||||
|
||||
const dataList = [
|
||||
{value: 'llama3:latest', label: 'llama3:latest'},
|
||||
{value: 'wangfuyun/AnimateLCM', label: 'wangfuyun/AnimateLCM'},
|
||||
{value: 'Revanthraja/Text_to_Vision', label: 'Revanthraja/Text_to_Vision'},
|
||||
]
|
||||
const Playground: React.FC = () => {
|
||||
const [ModelList, setModelList] = useState(dataList)
|
||||
const [messageList, setMessageList] = useState<any[]>([])
|
||||
const [selectedModel, setSelectedModel] = useState('llama3:latest')
|
||||
|
||||
const handleSelectChange = (value: string) => {
|
||||
setSelectedModel(value)
|
||||
}
|
||||
|
||||
const getMessageList = () => {
|
||||
// fetch message list from server
|
||||
setMessageList(['1'])
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getMessageList()
|
||||
}, [selectedModel])
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
return (
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
title: 'Dashboard',
|
||||
}}
|
||||
>
|
||||
<div>Playground</div>
|
||||
|
||||
title={false}
|
||||
extra={[
|
||||
<Space size={20}>
|
||||
<Select showSearch options={ModelList} style={{width: 300}} value={selectedModel} onChange={handleSelectChange} variant='filled'></Select>
|
||||
<Popover content="ssd" title="Title" trigger="click">
|
||||
<Button type="primary" shape="circle" icon={<ControlOutlined />}>
|
||||
</Button>
|
||||
</Popover>
|
||||
|
||||
</Space>
|
||||
]}
|
||||
footer={[
|
||||
<MessageInput/>
|
||||
]}
|
||||
>
|
||||
|
||||
<div style={{display: 'flex', justifyContent: 'center'}}>
|
||||
<ChatContent messageList={messageList}></ChatContent>
|
||||
</div>
|
||||
<SealInput.Input label="test label"></SealInput.Input>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
export default Playground;
|
||||
Reference in New Issue
Block a user