|
| 1 | +import { createPortal } from 'react-dom' |
| 2 | +import { useState } from 'react' |
| 3 | +import PropTypes from 'prop-types' |
| 4 | + |
| 5 | +import { Tabs, Tab, Dialog, DialogContent, DialogTitle, Box } from '@mui/material' |
| 6 | +import { CopyBlock, atomOneDark } from 'react-code-blocks' |
| 7 | +import { baseURL } from 'store/constant' |
| 8 | +import pythonSVG from 'assets/images/python.svg' |
| 9 | +import javascriptSVG from 'assets/images/javascript.svg' |
| 10 | +import cURLSVG from 'assets/images/cURL.svg' |
| 11 | + |
| 12 | +function TabPanel(props) { |
| 13 | + const { children, value, index, ...other } = props |
| 14 | + return ( |
| 15 | + <div |
| 16 | + role='tabpanel' |
| 17 | + hidden={value !== index} |
| 18 | + id={`attachment-tabpanel-${index}`} |
| 19 | + aria-labelledby={`attachment-tab-${index}`} |
| 20 | + {...other} |
| 21 | + > |
| 22 | + {value === index && <Box sx={{ p: 1 }}>{children}</Box>} |
| 23 | + </div> |
| 24 | + ) |
| 25 | +} |
| 26 | + |
| 27 | +TabPanel.propTypes = { |
| 28 | + children: PropTypes.node, |
| 29 | + index: PropTypes.number.isRequired, |
| 30 | + value: PropTypes.number.isRequired |
| 31 | +} |
| 32 | + |
| 33 | +function a11yProps(index) { |
| 34 | + return { |
| 35 | + id: `attachment-tab-${index}`, |
| 36 | + 'aria-controls': `attachment-tabpanel-${index}` |
| 37 | + } |
| 38 | +} |
| 39 | + |
| 40 | +const APICodeDialog = ({ show, dialogProps, onCancel }) => { |
| 41 | + const portalElement = document.getElementById('portal') |
| 42 | + const codes = ['Python', 'JavaScript', 'cURL'] |
| 43 | + const [value, setValue] = useState(0) |
| 44 | + |
| 45 | + const handleChange = (event, newValue) => { |
| 46 | + setValue(newValue) |
| 47 | + } |
| 48 | + |
| 49 | + const getCode = (codeLang) => { |
| 50 | + if (codeLang === 'Python') { |
| 51 | + return `import requests |
| 52 | +
|
| 53 | +API_URL = "${baseURL}/api/v1/prediction/${dialogProps.chatflowid}" |
| 54 | +
|
| 55 | +def query(payload): |
| 56 | + response = requests.post(API_URL, json=payload) |
| 57 | + return response.json() |
| 58 | + |
| 59 | +output = query({ |
| 60 | + "question": "Hey, how are you?", |
| 61 | +}) |
| 62 | +` |
| 63 | + } else if (codeLang === 'JavaScript') { |
| 64 | + return `async function query(data) { |
| 65 | + const response = await fetch( |
| 66 | + "${baseURL}/api/v1/prediction/${dialogProps.chatflowid}", |
| 67 | + { |
| 68 | + method: "POST", |
| 69 | + body: { |
| 70 | + "question": "Hey, how are you?" |
| 71 | + }, |
| 72 | + } |
| 73 | + ); |
| 74 | + const result = await response.json(); |
| 75 | + return result; |
| 76 | +} |
| 77 | +` |
| 78 | + } else if (codeLang === 'cURL') { |
| 79 | + return `curl ${baseURL}/api/v1/prediction/${dialogProps.chatflowid} \\ |
| 80 | + -X POST \\ |
| 81 | + -d '{"question": "Hey, how are you?"}'` |
| 82 | + } |
| 83 | + return '' |
| 84 | + } |
| 85 | + |
| 86 | + const getLang = (codeLang) => { |
| 87 | + if (codeLang === 'Python') { |
| 88 | + return 'python' |
| 89 | + } else if (codeLang === 'JavaScript') { |
| 90 | + return 'javascript' |
| 91 | + } else if (codeLang === 'cURL') { |
| 92 | + return 'bash' |
| 93 | + } |
| 94 | + return 'python' |
| 95 | + } |
| 96 | + |
| 97 | + const getSVG = (codeLang) => { |
| 98 | + if (codeLang === 'Python') { |
| 99 | + return pythonSVG |
| 100 | + } else if (codeLang === 'JavaScript') { |
| 101 | + return javascriptSVG |
| 102 | + } else if (codeLang === 'cURL') { |
| 103 | + return cURLSVG |
| 104 | + } |
| 105 | + return pythonSVG |
| 106 | + } |
| 107 | + |
| 108 | + const component = show ? ( |
| 109 | + <Dialog |
| 110 | + open={show} |
| 111 | + fullWidth |
| 112 | + maxWidth='md' |
| 113 | + onClose={onCancel} |
| 114 | + aria-labelledby='alert-dialog-title' |
| 115 | + aria-describedby='alert-dialog-description' |
| 116 | + > |
| 117 | + <DialogTitle sx={{ fontSize: '1rem' }} id='alert-dialog-title'> |
| 118 | + {dialogProps.title} |
| 119 | + </DialogTitle> |
| 120 | + <DialogContent> |
| 121 | + <Tabs value={value} onChange={handleChange} aria-label='tabs'> |
| 122 | + {codes.map((codeLang, index) => ( |
| 123 | + <Tab |
| 124 | + icon={ |
| 125 | + <img |
| 126 | + style={{ objectFit: 'cover', height: 'auto', width: 'auto', marginLeft: 10 }} |
| 127 | + src={getSVG(codeLang)} |
| 128 | + alt='code' |
| 129 | + /> |
| 130 | + } |
| 131 | + iconPosition='left' |
| 132 | + key={index} |
| 133 | + label={codeLang} |
| 134 | + {...a11yProps(index)} |
| 135 | + ></Tab> |
| 136 | + ))} |
| 137 | + </Tabs> |
| 138 | + <div style={{ marginTop: 10 }}></div> |
| 139 | + {codes.map((codeLang, index) => ( |
| 140 | + <TabPanel key={index} value={value} index={index}> |
| 141 | + <CopyBlock |
| 142 | + theme={atomOneDark} |
| 143 | + text={getCode(codeLang)} |
| 144 | + language={getLang(codeLang)} |
| 145 | + showLineNumbers={false} |
| 146 | + wrapLines |
| 147 | + /> |
| 148 | + </TabPanel> |
| 149 | + ))} |
| 150 | + </DialogContent> |
| 151 | + </Dialog> |
| 152 | + ) : null |
| 153 | + |
| 154 | + return createPortal(component, portalElement) |
| 155 | +} |
| 156 | + |
| 157 | +APICodeDialog.propTypes = { |
| 158 | + show: PropTypes.bool, |
| 159 | + dialogProps: PropTypes.object, |
| 160 | + onCancel: PropTypes.func |
| 161 | +} |
| 162 | + |
| 163 | +export default APICodeDialog |
0 commit comments