Commit c330a658 authored by 文旺-丰林-DEV's avatar 文旺-丰林-DEV

add retry feature

parent 18d92ecd
...@@ -7,13 +7,13 @@ import { CopyOutlined } from '@ant-design/icons'; ...@@ -7,13 +7,13 @@ import { CopyOutlined } from '@ant-design/icons';
interface IAnswerProps { interface IAnswerProps {
answerValue: string; answerValue: string;
isShowRetry?: boolean; onRetry?: () => void;
} }
const { useBreakpoint } = Grid; const { useBreakpoint } = Grid;
const Answer = (props: IAnswerProps) => { const Answer = (props: IAnswerProps) => {
const { answerValue, isShowRetry } = props; const { answerValue, onRetry } = props;
const screens = useBreakpoint(); const screens = useBreakpoint();
const isMobile = screens.xs; const isMobile = screens.xs;
...@@ -64,7 +64,16 @@ const Answer = (props: IAnswerProps) => { ...@@ -64,7 +64,16 @@ const Answer = (props: IAnswerProps) => {
</p> </p>
)} )}
</div> </div>
{/* {isShowRetry && !isMobile && <Button className={styles.chat_retry}>重试</Button>} */} {!isMobile && (
<Button
className={styles.chat_retry}
onClick={() => {
onRetry && onRetry();
}}
>
重试
</Button>
)}
</Col> </Col>
<Col> <Col>
{isMobile && answerValue && ( {isMobile && answerValue && (
...@@ -78,7 +87,14 @@ const Answer = (props: IAnswerProps) => { ...@@ -78,7 +87,14 @@ const Answer = (props: IAnswerProps) => {
> >
复制回答 复制回答
</Button> </Button>
{/* <Button className={styles.mobile_chat_retry}>重试</Button> */} <Button
className={styles.mobile_chat_retry}
onClick={() => {
onRetry && onRetry();
}}
>
重试
</Button>
</Row> </Row>
)} )}
</Col> </Col>
......
...@@ -71,21 +71,11 @@ ...@@ -71,21 +71,11 @@
} }
} }
.chat_retry { .chat_retry {
width: 90px; margin-left: 10px;
height: 48px; color: #009b95;
// margin-left: 10px;
background: #ffffff; background: #ffffff;
border: 1px solid #009b95; border: 1px solid #009b95;
border-radius: 6px; border-radius: 6px;
span {
width: 40px;
height: 28px;
color: #009b95;
font-weight: 400;
font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
line-height: 28px;
}
} }
} }
.mobile_button { .mobile_button {
......
...@@ -7,12 +7,13 @@ import classNames from 'classnames'; ...@@ -7,12 +7,13 @@ import classNames from 'classnames';
interface INewSessionProps { interface INewSessionProps {
questionValue: string; questionValue: string;
answerValue: string; answerValue: string;
onRetry?: (prompt: string) => void;
} }
const { useBreakpoint } = Grid; const { useBreakpoint } = Grid;
const NewSession = (props: INewSessionProps) => { const NewSession = (props: INewSessionProps) => {
const { questionValue, answerValue } = props; const { questionValue, answerValue, onRetry } = props;
const screens = useBreakpoint(); const screens = useBreakpoint();
const isMobile = screens.xs; const isMobile = screens.xs;
...@@ -26,7 +27,12 @@ const NewSession = (props: INewSessionProps) => { ...@@ -26,7 +27,12 @@ const NewSession = (props: INewSessionProps) => {
className={classNames(isMobile && styles.mobile_newSession, styles.newSession)} className={classNames(isMobile && styles.mobile_newSession, styles.newSession)}
> >
<Issue questionValue={questionValue} /> <Issue questionValue={questionValue} />
<Answer answerValue={answerValue} /> <Answer
answerValue={answerValue}
onRetry={() => {
onRetry && onRetry(questionValue);
}}
/>
</Row> </Row>
); );
}; };
......
...@@ -25,6 +25,10 @@ ...@@ -25,6 +25,10 @@
} }
} }
html {
overflow-x: hidden;
}
html, html,
body, body,
#root { #root {
...@@ -100,12 +104,12 @@ ol { ...@@ -100,12 +104,12 @@ ol {
.ant-btn:active, .ant-btn:active,
.ant-btn:focus { .ant-btn:focus {
background-color: #00beb6 !important; background-color: #68beb9 !important;
border-color: #00beb6 !important; border-color: #68beb9 !important;
} }
.ant-btn:hover { .ant-btn:hover {
color: #fff; color: #fff;
background-color: #00beb6 !important; background-color: #68beb9 !important;
border-color: #00beb6 !important; border-color: #68beb9 !important;
} }
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
cursor: pointer; cursor: pointer;
&:hover .CardContent { &:hover .CardContent {
background-color: #0a7a73; background-color: #0a7a73;
&:hover .content { .content {
color: white; color: white;
} }
&:hover .button { .button {
color: #0a7a73; color: #0a7a73;
background-color: white; background-color: white;
border: solid 1px white; border: solid 1px white;
...@@ -27,16 +27,17 @@ ...@@ -27,16 +27,17 @@
transition: all 0.25s; transition: all 0.25s;
.content { .content {
display: -webkit-box; display: -webkit-box;
height: 202px; height: 174px;
overflow: hidden; overflow: hidden;
color: #666666; color: #666666;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 28px; line-height: 28px;
letter-spacing: 4px;
white-space: normal; white-space: normal;
text-overflow: ellipsis; text-overflow: ellipsis;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 7; -webkit-line-clamp: 6;
} }
.button { .button {
width: 180px; width: 180px;
...@@ -55,10 +56,10 @@ ...@@ -55,10 +56,10 @@
.CardWrapperMobile { .CardWrapperMobile {
&:hover .CardContent { &:hover .CardContent {
background-color: #f8f9fb; background-color: #f8f9fb;
&:hover .content { .content {
color: #0a7a73; color: #0a7a73;
} }
&:hover .button { .button {
color: #0a7a73; color: #0a7a73;
background-color: #f8f9fb; background-color: #f8f9fb;
border: solid 1px #0a7a73; border: solid 1px #0a7a73;
......
...@@ -19,6 +19,7 @@ import { GetChatGLMToken, GetPromptList } from '@/services/chatGLM/api'; ...@@ -19,6 +19,7 @@ import { GetChatGLMToken, GetPromptList } from '@/services/chatGLM/api';
import { useAccess } from 'umi'; import { useAccess } from 'umi';
import { PageLoading } from '@ant-design/pro-layout'; import { PageLoading } from '@ant-design/pro-layout';
import { checkIsTokenExpires } from '@/access'; import { checkIsTokenExpires } from '@/access';
import TextArea from 'antd/lib/input/TextArea';
const { useBreakpoint } = Grid; const { useBreakpoint } = Grid;
const { Title } = Typography; const { Title } = Typography;
...@@ -252,6 +253,10 @@ const Chat: React.FC = () => { ...@@ -252,6 +253,10 @@ const Chat: React.FC = () => {
<div style={{ marginBottom: 150 }}> <div style={{ marginBottom: 150 }}>
{messageHistory.current.map((item, index) => ( {messageHistory.current.map((item, index) => (
<NewSession <NewSession
onRetry={(value) => {
setChat(value);
handleSendMessage();
}}
key={'new' + index} key={'new' + index}
questionValue={item.prompt} questionValue={item.prompt}
answerValue={item.answer} answerValue={item.answer}
...@@ -276,8 +281,8 @@ const Chat: React.FC = () => { ...@@ -276,8 +281,8 @@ const Chat: React.FC = () => {
}} }}
> >
<Row justify={'center'} align={'middle'} style={{ textAlign: 'center' }}> <Row justify={'center'} align={'middle'} style={{ textAlign: 'center' }}>
<Col span={24} style={{ textAlign: 'center' }}> <Col span={24} style={{ textAlign: 'center', marginTop: 12 }}>
<Space style={{ textAlign: 'center' }}> <Space style={{ textAlign: 'center', height: 40 }}>
<div <div
className={styles.chatWrapper} className={styles.chatWrapper}
style={{ style={{
...@@ -290,11 +295,16 @@ const Chat: React.FC = () => { ...@@ -290,11 +295,16 @@ const Chat: React.FC = () => {
}} }}
> >
<Item name="chatInput"> <Item name="chatInput">
<Input {isMobile ? (
required <TextArea
placeholder="在这里输入你想知道的问题,给我几句提示,我来帮你回答" autoSize={{ minRows: 1, maxRows: 2 }}
size="large" required
/> placeholder={'在这里输入你想知道的问题'}
size="large"
/>
) : (
<Input required placeholder={'在这里输入你想知道的问题'} size="large" />
)}
</Item> </Item>
</div> </div>
<div className={styles.outputButtonWrapper}> <div className={styles.outputButtonWrapper}>
...@@ -314,6 +324,11 @@ const Chat: React.FC = () => { ...@@ -314,6 +324,11 @@ const Chat: React.FC = () => {
</div> </div>
</Space> </Space>
</Col> </Col>
<Col span={24}>
<span style={{ color: '#999', fontSize: 13, marginTop: isMobile ? 10 : 0 }}>
技术支持方 ChatMAP.AI
</span>
</Col>
</Row> </Row>
</div> </div>
</Row> </Row>
......
...@@ -24,7 +24,7 @@ request.interceptors.response.use(async (response): Promise<any> => { ...@@ -24,7 +24,7 @@ request.interceptors.response.use(async (response): Promise<any> => {
if (response.status === 401) { if (response.status === 401) {
localStorage.removeItem('user'); localStorage.removeItem('user');
localStorage.removeItem('expires'); localStorage.removeItem('expires');
history.push('/chat'); location.href = '/chat';
} else if (response.status === 200) { } else if (response.status === 200) {
return response; return response;
} else { } else {
......
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