chore: add copy button

This commit is contained in:
jialin
2024-11-29 17:03:46 +08:00
parent d1a80e1a64
commit 2ddeca8f9d
3 changed files with 41 additions and 7 deletions
@@ -209,7 +209,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
..._.omitBy(finalParameters, (value: string) => !value), ..._.omitBy(finalParameters, (value: string) => !value),
seed: parameters.random_seed ? generateRandomNumber() : parameters.seed, seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
stream: true, stream: true,
stream_options: {}, stream_options: {
chunk_size: 16 * 1024,
chunk_results: true
},
prompt: current?.content || currentPrompt || '' prompt: current?.content || currentPrompt || ''
}; };
setParams({ setParams({
+30 -5
View File
@@ -1,6 +1,7 @@
import AlertInfo from '@/components/alert-info'; import AlertInfo from '@/components/alert-info';
import AudioAnimation from '@/components/audio-animation'; import AudioAnimation from '@/components/audio-animation';
import AudioPlayer from '@/components/audio-player'; import AudioPlayer from '@/components/audio-player';
import CopyButton from '@/components/copy-button';
import IconFont from '@/components/icon-font'; import IconFont from '@/components/icon-font';
import UploadAudio from '@/components/upload-audio'; import UploadAudio from '@/components/upload-audio';
import useOverlayScroller from '@/hooks/use-overlay-scroller'; import useOverlayScroller from '@/hooks/use-overlay-scroller';
@@ -252,7 +253,12 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
}, [messageList, loading]); }, [messageList, loading]);
return ( return (
<div className="ground-left-wrapper"> <div
className="ground-left-wrapper"
style={{
height: 'calc(100vh - 72px)'
}}
>
<div className="ground-left"> <div className="ground-left">
<div className="ground-left-footer" style={{ flex: 1 }}> <div className="ground-left-footer" style={{ flex: 1 }}>
<div className="speech-to-text"> <div className="speech-to-text">
@@ -319,17 +325,34 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
flex: 1, flex: 1,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'space-between' justifyContent: 'space-between',
overflow: 'auto'
}} }}
> >
<div <div
className="message-list-wrap" className="message-list-wrap"
ref={scroller}
style={{ style={{
flex: 1,
position: 'relative',
borderTop: '1px solid var(--ant-color-split)' borderTop: '1px solid var(--ant-color-split)'
}} }}
> >
<div className="content" style={{ height: '100%' }}> {messageList?.length > 0 && (
<span
style={{
position: 'absolute',
top: 0,
right: 2
}}
>
<CopyButton text={messageList[0]?.content}></CopyButton>
</span>
)}
<div
className="content"
style={{ height: '100%', overflow: 'auto' }}
ref={scroller}
>
<> <>
{!tokenResult && ( {!tokenResult && (
<div <div
@@ -337,7 +360,8 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
padding: '8px 14px', padding: '8px 14px',
lineHeight: '20px', lineHeight: '20px',
display: 'flex', display: 'flex',
justifyContent: 'center' justifyContent: 'center',
textAlign: 'center'
}} }}
> >
{messageList.length ? ( {messageList.length ? (
@@ -366,6 +390,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
)} )}
</> </>
</div> </div>
<div></div>
</div> </div>
</div> </div>
</div> </div>
@@ -3,6 +3,7 @@ import HighlightCode from '@/components/highlight-code';
import { BulbOutlined } from '@ant-design/icons'; import { BulbOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max'; import { useIntl } from '@umijs/max';
import { Button, Modal } from 'antd'; import { Button, Modal } from 'antd';
import _ from 'lodash';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
type ViewModalProps = { type ViewModalProps = {
@@ -67,10 +68,15 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
const code = `import axios from 'axios';\n\nconst url = "${BaseURL}";\n\nconst headers = ${JSON.stringify(headers, null, 2)};\n\nconst data = ${JSON.stringify(data, null, 2)};\n\naxios.post(url, data, { headers }).then((response) => {\n console.log(response.${logcommand.node});\n});`; const code = `import axios from 'axios';\n\nconst url = "${BaseURL}";\n\nconst headers = ${JSON.stringify(headers, null, 2)};\n\nconst data = ${JSON.stringify(data, null, 2)};\n\naxios.post(url, data, { headers }).then((response) => {\n console.log(response.${logcommand.node});\n});`;
setCodeValue(code); setCodeValue(code);
} else if (lang === langMap.python) { } else if (lang === langMap.python) {
const data = { let data = {
...parameters, ...parameters,
...payload ...payload
}; };
_.keys(data).forEach((key: string) => {
if (data[key] === null) {
delete data[key];
}
});
const headers = { const headers = {
'Content-type': 'application/json', 'Content-type': 'application/json',
Authorization: `Bearer $\{YOUR_GPUSTACK_API_KEY}` Authorization: `Bearer $\{YOUR_GPUSTACK_API_KEY}`