feat:

src/BotAddin.tsx

@@ -1 +1,32 @@
-import React from 'react'
+import React, { ChangeEvent, FC } from 'react'
+import Paper from '@mui/material/Paper'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import TextField from '@mui/material/TextField'
+
+interface Value {
+	id: string
+	secret: string
+}
+
+export const BotAddin: FC<{
+	value: Value
+	onChange: (value: Value) => void
+}>
+= ({ value, onChange }) => {
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+		onChange({
+			...value,
+			[e.target.name]: e.target.value
+		})
+	}
+	return (
+		<Paper>
+			<Typography variant="h6">RC Bot Add-in</Typography>
+			<Box>
+				<TextField label="RingCentral Client ID" name="id" onChange={handleChange} value={value.id} />
+				<TextField label="RingCentral Client Screct" name="screct" onChange={handleChange} value={value.secret} />
+			</Box>
+		</Paper>
+	)
+}

src/Editor.tsx

@@ -9,22 +9,20 @@
 import React, { useState } from 'react';
 import MonacoEditor from 'react-monaco-editor';
 
-export const Editor: React.FC = () => {
+export const Editor: React.FC<{ value: string; onChange: (value: string) => void }> = ({ value, onChange }) => {
-	const [code, setCode] = useState(['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'))
+	// const [code, setCode] = useState(['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'))
-
-
 	return (
 		<MonacoEditor
 			width="100%"
 			height="300"
 			language="javascript"
 			theme="vs-dark"
-			value={code}
+			value={value}
 			options={{
 				selectOnLineNumbers: true,
 				automaticLayout: true,
 			}}
-			onChange={setCode}
+			onChange={onChange}
 		/>
 	)
 };

src/EmailSender.tsx

@@ -1 +1,22 @@
-import React from 'react'
+import React, { ChangeEvent, FC } from 'react'
+import Paper from '@mui/material/Paper'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import TextField from '@mui/material/TextField'
+
+export const EmailSender: FC<{ value: string; onChange: (value: string) => void }> = ({ value, onChange }) => {
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+		onChange(e.target.value)
+	}
+	return (
+		<Paper>
+			<Typography variant="h6">Email Sender</Typography>
+			<Box>
+				<TextField label="Email" placeholder="Please enter your email address" type="email"
+					value={value}
+					onChange={handleChange}
+				/>
+			</Box>
+		</Paper>
+	)
+}

src/Script.tsx

@@ -1 +1,16 @@
-import React from 'react'
+import React, { FC } from 'react'
+import Box from '@mui/material/Box'
+import Paper from '@mui/material/Paper'
+import Typography from '@mui/material/Typography'
+import { Editor } from './Editor'
+
+export const ScriptBlock: FC<{ value: string; onChange: (value: string) => void }> = (props) => {
+	return (
+		<Paper>
+			<Typography variant="h6">Script</Typography>
+			<Box>
+				<Editor {...props} />
+			</Box>
+		</Paper>
+	)
+}