Commit 1bf28e3e authored by Ylg's avatar Ylg

add new session page

parent 6e10377d
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<title>Group 90</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="02-新建会话-输入状态" transform="translate(-1134.000000, -525.000000)">
<g id="Group-90" transform="translate(1134.000000, 525.000000)">
<rect id="Rectangle-37-Copy-27" x="0" y="0" width="24" height="24"/>
<g id="copy" transform="translate(4.509766, 2.000000)" fill="#009B95" fill-rule="nonzero">
<path d="M14.5820313,4.64453125 L10.40625,0.416015625 C10.3183594,0.328125 10.2226562,0.25390625 10.1191406,0.19140625 C10.0917969,0.17578125 10.0644531,0.16015625 10.0351562,0.146484375 C10.0175781,0.13671875 9.99804688,0.12890625 9.98046875,0.12109375 C9.8046875,0.04296875 9.61132813,0 9.4140625,0 L3.92578125,0 C3.1484375,0 2.5,0.62890625 2.5,1.40625 L2.5,2.5 L1.41601562,2.5 C0.638671875,2.5 0,3.13671875 0,3.9140625 L0,18.6015625 C0,19.3789062 0.638671875,20 1.41601562,20 L11.0839844,20 C11.8613281,20 12.4804688,19.3789062 12.4804688,18.6015625 L12.4804688,17.5 L13.59375,17.5 C14.3710938,17.5 14.9804688,16.8710938 14.9804688,16.09375 L14.9804688,5.63476562 C14.9804688,5.26367188 14.84375,4.90820312 14.5820313,4.64453125 Z M10.1367188,2.15625 L12.8085938,4.84375 L10.1367188,4.84375 L10.1367188,2.15625 Z M11.0742188,18.59375 L1.40625,18.59375 L1.40625,3.90625 L2.5,3.90625 L2.5,16.09375 C2.5,16.8710938 3.1484375,17.5 3.92578125,17.5 L11.0742188,17.5 L11.0742188,18.59375 Z M13.5742188,16.09375 L3.90625,16.09375 L3.90625,1.40625 L8.73046875,1.40625 L8.73046875,4.84375 C8.73046875,5.62109375 9.37890625,6.25 10.15625,6.25 L13.5742188,6.25 L13.5742188,16.09375 Z M10,8.203125 C10,7.81445312 9.68554688,7.5 9.296875,7.5 L5.703125,7.5 C5.31445312,7.5 5,7.81445312 5,8.203125 C5,8.59179688 5.31445312,8.90625 5.703125,8.90625 L9.296875,8.90625 C9.68554688,8.90625 10,8.59179688 10,8.203125 Z M12.5,10.703125 C12.5,10.3144531 12.1855469,10 11.796875,10 L5.703125,10 C5.31445312,10 5,10.3144531 5,10.703125 C5,11.0917969 5.31445312,11.40625 5.703125,11.40625 L11.796875,11.40625 C12.1855469,11.40625 12.5,11.0917969 12.5,10.703125 Z M11.25,13.203125 C11.25,12.8144531 10.9355469,12.5 10.546875,12.5 L5.703125,12.5 C5.31445312,12.5 5,12.8144531 5,13.203125 C5,13.5917969 5.31445312,13.90625 5.703125,13.90625 L10.546875,13.90625 C10.9355469,13.90625 11.25,13.5917969 11.25,13.203125 Z" id="Shape"/>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="28px" viewBox="0 0 28 28" version="1.1">
<title>头像</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.648346657">
<g id="02-新建会话-输入状态" transform="translate(-312.000000, -195.000000)" fill="#000000">
<g id="头像" transform="translate(312.000000, 195.001043)">
<path d="M14,0 C21.7319865,-1.42034288e-15 28,6.2680135 28,14 C28,21.7319865 21.7319865,28 14,28 C6.2680135,28 -6.15853211e-15,21.7319865 0,14 C-9.46895252e-16,6.2680135 6.2680135,1.42034288e-15 14,0 Z M14,17.549548 C10.2996167,17.549548 6.88654062,18.7796563 4.14792424,20.8528806 C6.31608262,23.9641135 9.92028792,26 14,26 C18.0797121,26 21.6839174,23.9641135 23.8527574,20.853367 C21.1135784,18.7796992 17.7004478,17.549548 14,17.549548 Z M14,7.78239923 C11.790861,7.78239923 10,9.57326023 10,11.7823992 C10,13.9915382 11.790861,15.7823992 14,15.7823992 C16.209139,15.7823992 18,13.9915382 18,11.7823992 C18,9.57326023 16.209139,7.78239923 14,7.78239923 Z" id="形状结合"/>
</g>
</g>
</g>
</svg>
\ No newline at end of file
......@@ -15,19 +15,15 @@ const LoginModal = (props: ILoginModalProps) => {
const { open, setOpen } = props;
const intl = useIntl();
const [loginResult, setLoginResult] = useState({});
const [loading, setLoading] = useState(false);
const formRef = useRef<FormInstance>(null);
const reset = () => {
setOpen(false);
formRef.current?.resetFields();
};
const handleSubmit = async (values: any) => {
console.log('values', values);
setLoading(true);
const { username, password, checked } = values;
try {
......@@ -47,7 +43,6 @@ const LoginModal = (props: ILoginModalProps) => {
});
message.error(defaultLoginFailureMessage);
}
// reset();
};
return (
......@@ -82,13 +77,13 @@ const LoginModal = (props: ILoginModalProps) => {
>
<Form.Item
name="username"
rules={[{ required: true, message: 'Please input your Username!' }]}
rules={[{ required: true, message: '请输入你的账户!' }]}
>
<Input prefix={<UserOutlined />} placeholder="账户" />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your Password!' }]}
rules={[{ required: true, message: '请输入你的密码!' }]}
>
<Input prefix={<LockOutlined />} type="password" placeholder="密码" />
</Form.Item>
......
@import (reference) '~antd/es/style/themes/index';
.newSession {
margin-top: 40px;
width: 1000px;
.question {
display: flex;
align-items: center;
img {
width: 26px;
height: 26px;
}
span {
font-size: 20px;
font-weight: 600;
line-height: 26px;
color: #333333;
height: 28px;
margin-left: 16px;
}
}
.chat {
display: flex;
div {
position: relative;
p {
position: absolute;
bottom: 0;
right: 16px;
z-index: 2;
cursor: pointer;
img {
width: 24px;
height: 24px;
}
span {
color: #009B95;
line-height: 20px;
height: 24px;
font-size: 14px;
}
}
}
button {
width: 90px;
height: 48px;
background: #FFFFFF;
border-radius: 6px;
border: 1px solid #009B95;
margin-left: 10px;
span {
width: 40px;
height: 28px;
font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #009B95;
line-height: 28px;
}
}
}
}
\ No newline at end of file
import styles from './index.less';
import userSvg from '../../assets/user.svg';
import logoSvg from '../../assets/logo.svg';
import copySvg from '../../assets/copy.svg';
import { Button, Input } from 'antd';
import { useState } from 'react';
const { TextArea } = Input;
interface INewSessionProps {
questionValue: string;
}
const NewSession = (props: INewSessionProps) => {
const { questionValue } = props;
const [answerValue, setAnswerValue]= useState('');
const NewSession = () => {
return (
<div className={styles.newSession}>
<div className={styles.question} style={{ marginBottom: '40px' }}>
<img src={userSvg} alt="" />
<span>{questionValue}</span>
</div>
<div>
<p className={styles.question}>
<img src={logoSvg} alt="" />
<span>回答如下:</span>
</p>
<div className={styles.chat}>
<div>
<p
onClick={() => {
}}
>
<img src={copySvg} alt="" />
<span>复制回答</span>
</p>
<TextArea
value={answerValue}
onChange={(e) => setAnswerValue(e.target.value)}
placeholder="请耐心等待3-5秒~"
// autoSize={{ minRows: 3, maxRows: 5 }}
style={{
width: '900px',
height: '268px',
marginLeft: '28px',
background: '#F0F3F6',
borderRadius: '4px',
fontSize: '18px',
color: 'rgba(0,0,0,0.85)',
lineHeight: '32px',
}}
/>
</div>
<Button
onClick={() => {
}}
>
重试
</Button>
</div>
</div>
</div>
);
}
......
......@@ -15,6 +15,7 @@ import {
import classNames from 'classnames';
import { Grid } from 'antd';
import LoginModal from '@/components/loginModal';
import NewSession from '@/components/newSession';
const { useBreakpoint } = Grid;
......@@ -25,10 +26,7 @@ const { Item } = Form;
const Chat: React.FC = () => {
const screens = useBreakpoint();
const isMobile = screens.xs;
const isPod = screens.sm;
const [chat, SetChat] = useState({
chatInput: '',
});
const [chat, setChat] = useState('');
const [showSider, setShowSider] = useState(true);
const [firstChat, setFirstChat] = useState(false);
const [form] = Form.useForm();
......@@ -50,19 +48,17 @@ const Chat: React.FC = () => {
}
}, []);
const onSend = (value: any) => {
console.log(value);
const onSend = () => {
form.setFieldValue('chatInput', '');
setFirstChat(true);
};
const setInput = (value: any) => {
form.setFieldValue('chatInput', value?.firstInput);
setFirstChat(true);
};
const onChange = (value: any) => {
value?.chatInput && SetChat(value?.chatInput);
value?.chatInput && setChat(value?.chatInput);
value?.firstInput && setInput(value);
};
......@@ -168,32 +164,29 @@ const Chat: React.FC = () => {
)}
<Col className={styles.chatContent} span={20} lg={19} sm={14} md={17} xs={12}>
{!firstChat && (
<>
<div className={styles.header}>
<Row>
<Col span={24}>
<Title level={1}>产品名称</Title>
</Col>
<Col span={24}>
<Title level={5} className={styles.subTitle}>
AI改变世界
</Title>
</Col>
</Row>
</div>
</>
)}
<div className={styles.header}>
<Row>
<Col span={24}>
<Title level={1}>产品名称</Title>
</Col>
<Col span={24}>
<Title level={5} className={styles.subTitle}>
AI改变世界
</Title>
</Col>
</Row>
</div>
<Form
form={form}
initialValues={{ ...chat }}
initialValues={{ chatInput: chat }}
name="chat"
onValuesChange={onChange}
onFinish={onSend}
>
{firstChat ? (
<div className={styles.chatRoom}>sss</div>
<NewSession
questionValue={chat}
/>
) : (
<Item name="firstInput">
<ChatFirstContent />
......@@ -214,7 +207,7 @@ const Chat: React.FC = () => {
<Col span={4}>
<div className={styles.outputButtonWrapper}>
<Item name="outputButton">
<Button type="primary" size="large">
<Button htmlType="submit" type="primary" size="large" disabled={chat.length === 0}>
发送
</Button>
</Item>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment