fix: eslint format
This commit is contained in:
jialin
@@ -21,7 +21,7 @@
|
||||
.chatContent {
|
||||
width: max(50%, 500px);
|
||||
}
|
||||
.chatMessageItem {
|
||||
.chatMessageItem {
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
@@ -1,31 +1,33 @@
|
||||
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'
|
||||
import avatar from '@/assets/images/avatar.png';
|
||||
import logo from '@/assets/images/logo.png';
|
||||
import { CopyOutlined, DislikeOutlined, EditOutlined, SyncOutlined } from '@ant-design/icons';
|
||||
import { Button, Space, Tooltip } from 'antd';
|
||||
import chatStyle from './chat-style.less';
|
||||
import ChatEmpty from './chatEmpty';
|
||||
|
||||
export type ChatContentProps = {
|
||||
messageList: any[];
|
||||
}
|
||||
};
|
||||
|
||||
const QuestionMessage:React.FC<{content: string;}> = ({content}) => {
|
||||
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>
|
||||
<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}) => {
|
||||
const AnswerMessage: React.FC<{ content: string }> = ({ content }) => {
|
||||
return (
|
||||
<div className={chatStyle.chatMessageItem}>
|
||||
<span className={chatStyle.img}>
|
||||
@@ -37,7 +39,7 @@ const AnswerMessage:React.FC<{content: string;}> = ({content}) => {
|
||||
<Tooltip title="复制">
|
||||
<Button type="text" size="middle" icon={<CopyOutlined />}></Button>
|
||||
</Tooltip>
|
||||
<Tooltip title="复制">
|
||||
<Tooltip title="刷新">
|
||||
<Button type="text" size="middle" icon={<SyncOutlined />}></Button>
|
||||
</Tooltip>
|
||||
<Tooltip title="回答错误">
|
||||
@@ -45,17 +47,19 @@ const AnswerMessage:React.FC<{content: string;}> = ({content}) => {
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const ChatContent:React.FC<ChatContentProps> = ({ messageList }) => {
|
||||
const ChatContent: React.FC<ChatContentProps> = ({ messageList }) => {
|
||||
if (messageList.length === 0) {
|
||||
return <ChatEmpty/>
|
||||
return <ChatEmpty />;
|
||||
}
|
||||
return (<div className={chatStyle.chatContent}>
|
||||
<QuestionMessage content="hello"></QuestionMessage>
|
||||
<AnswerMessage content="hello, nice to meet you!"></AnswerMessage>
|
||||
</div>)
|
||||
}
|
||||
return (
|
||||
<div className={chatStyle.chatContent}>
|
||||
<QuestionMessage content="hello"></QuestionMessage>
|
||||
<AnswerMessage content="hello, nice to meet you!"></AnswerMessage>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatContent;
|
||||
export default ChatContent;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import Logo from '@/assets/images/logo.png';
|
||||
import chatStyle from './chat-style.less'
|
||||
import chatStyle from './chat-style.less';
|
||||
|
||||
const ChatEmpty:React.FC = () => {
|
||||
const ChatEmpty: React.FC = () => {
|
||||
return (
|
||||
<div className={chatStyle.chatEmpty}>
|
||||
<div className={chatStyle.logo}>
|
||||
@@ -10,6 +10,6 @@ const ChatEmpty:React.FC = () => {
|
||||
<h3 className={chatStyle.tips}>How can I help you today?</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default ChatEmpty;
|
||||
export default ChatEmpty;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.ant-pro-footer-bar {
|
||||
padding-block: 20px;
|
||||
padding-bottom: 30px;
|
||||
border:none;
|
||||
border: none;
|
||||
.ant-pro-footer-bar-right {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -9,8 +9,8 @@
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.messageInput{
|
||||
position:relative;
|
||||
.messageInput {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -29,35 +29,35 @@
|
||||
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 {
|
||||
padding: 16px;
|
||||
border-radius: 30px;
|
||||
background-color: transparent;
|
||||
}
|
||||
textarea::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
textarea::-webkit-scrollbar-track {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
textarea::-webkit-scrollbar-track {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
textarea::-webkit-scrollbar-thumb {
|
||||
background-color: #d9d9d9;
|
||||
border-radius: 6px;
|
||||
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);
|
||||
}
|
||||
}
|
||||
.send-btn {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 11px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,13 @@
|
||||
import { Form } from "antd";
|
||||
import { useState } from "react";
|
||||
import { Form } from 'antd';
|
||||
import { useState } from 'react';
|
||||
|
||||
const ParamsSettings:React.FC = () => {
|
||||
const ParamsSettings: React.FC = () => {
|
||||
const [params, setParams] = useState({
|
||||
name: 'jack',
|
||||
age: 18
|
||||
age: 18,
|
||||
});
|
||||
|
||||
return (<Form></Form>)
|
||||
return <Form></Form>;
|
||||
};
|
||||
|
||||
export default ParamsSettings;
|
||||
export default ParamsSettings;
|
||||
|
||||
@@ -1,59 +1,65 @@
|
||||
import { useState,useEffect} from 'react';
|
||||
import { Button, Select,Space,Input,Popover } from 'antd';
|
||||
import SealInput from '@/components/seal-form/seal-input';
|
||||
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 { Button, Popover, Select, Space } from 'antd';
|
||||
import { useEffect, useState } from 'react';
|
||||
import ChatContent from './components/chatContent';
|
||||
import MessageInput from './components/messageInput';
|
||||
|
||||
const dataList = [
|
||||
{value: 'llama3:latest', label: 'llama3:latest'},
|
||||
{value: 'wangfuyun/AnimateLCM', label: 'wangfuyun/AnimateLCM'},
|
||||
{value: 'Revanthraja/Text_to_Vision', label: 'Revanthraja/Text_to_Vision'},
|
||||
]
|
||||
{ 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 [ModelList, setModelList] = useState(dataList);
|
||||
const [messageList, setMessageList] = useState<any[]>([]);
|
||||
const [selectedModel, setSelectedModel] = useState('llama3:latest');
|
||||
|
||||
const handleSelectChange = (value: string) => {
|
||||
setSelectedModel(value)
|
||||
}
|
||||
setSelectedModel(value);
|
||||
};
|
||||
|
||||
const getMessageList = () => {
|
||||
// fetch message list from server
|
||||
setMessageList(['1'])
|
||||
}
|
||||
setMessageList(['1']);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getMessageList()
|
||||
}, [selectedModel])
|
||||
getMessageList();
|
||||
}, [selectedModel]);
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
|
||||
title={false}
|
||||
extra={[
|
||||
<Space size={20}>
|
||||
<Select showSearch options={ModelList} style={{width: 300}} value={selectedModel} onChange={handleSelectChange} variant='filled'></Select>
|
||||
<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>
|
||||
<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>
|
||||
footer={[<MessageInput />]}
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<ChatContent messageList={messageList}></ChatContent>
|
||||
</div>
|
||||
<SealInput.Input label="test label"></SealInput.Input>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Playground;
|
||||
export default Playground;
|
||||
|
||||
Reference in New Issue
Block a user