feat:

package.json

@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@fontsource/roboto": "^5.0.12",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/material": "^5.15.15",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -10,9 +15,15 @@
     "@types/node": "^16.18.95",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",
+    "localforage": "^1.10.0",
+    "lodash": "^4.17.21",
+    "match-sorter": "^6.3.4",
+    "monaco-editor": "^0.47.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
+    "sort-by": "^1.2.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
@@ -39,5 +50,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.0"
   }
 }

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.tsx

@@ -1,25 +1,29 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
+import { Home } from "./Home";
+import { List } from "./List";
+import { Create } from "./Create";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Home/>,
+    children: [{
+      path: '/',
+      element: <List/>
+    }, {
+      path: '/create',
+      element: <Create />
+    }]
+  },
+]);
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <RouterProvider router={router}/>
   );
 }
 

src/ChatItem.tsx

@@ -0,0 +1,61 @@
+/*
+ * @Author       : Eleanor Mao
+ * @Date         : 2024-04-09 14:46:24
+ * @LastEditTime : 2024-04-09 14:46:24
+ *
+ * Copyright © RingCentral. All rights reserved.
+ */
+import React, { FC } from "react";
+import { styled } from '@mui/material/styles';
+import ListItem from '@mui/material/ListItem';
+import SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined';
+import Box from '@mui/material/Box';
+import FaceIcon from '@mui/icons-material/Face';
+
+interface Props {
+  isMe: boolean;
+  message: string;
+}
+
+
+const ChatWrap = styled(ListItem)<{ isMe: boolean }>(({ isMe }) => ({
+  display: 'flex',
+  flexDirection: isMe ? 'row-reverse' : 'row',
+  marginBottom: 8,
+  gap: 8
+}));
+
+const ChatAvatar = styled('div')(() => ({
+  minWidth: 42,
+  flexShrink: 0,
+  marginTop: 8,
+}));
+
+
+const ChatMessageWrap = styled(Box)<{ isMe: boolean }>(({ isMe }) => ({
+  flex: '1 1 auto',
+  minWidth: 0,
+  marginTop: 4,
+  marginBottom: 4,
+  display: 'flex',
+  justifyContent: isMe ? 'flex-end' : 'flex-start'
+}));
+
+const ChatMessage = styled(Box)(() => ({
+  maxWidth: '80%',
+}));
+export const ChatItem: FC<Props> = ({ isMe, message }) => {
+  return (
+    <ChatWrap isMe={isMe} alignItems="flex-start">
+      <ChatAvatar>
+        {isMe ? <FaceIcon style={{ fontSize: 42 }} color="primary"/> :
+          <SmartToyOutlinedIcon style={{ fontSize: 42 }} color="secondary"/>}
+      </ChatAvatar>
+      <ChatMessageWrap isMe={isMe}>
+        <ChatMessage sx={{ borderRadius: 2, p: 2, bgcolor: isMe ? 'primary.light' : 'secondary.light' }}>
+          {message}
+        </ChatMessage>
+      </ChatMessageWrap>
+    </ChatWrap>
+  );
+};

src/Create.tsx

@@ -0,0 +1,147 @@
+/*
+ * @Author       : Eleanor Mao
+ * @Date         : 2024-04-09 10:36:44
+ * @LastEditTime : 2024-04-09 10:36:44
+ *
+ * Copyright © RingCentral. All rights reserved.
+ */
+import React, { ChangeEvent, KeyboardEvent, useEffect, useRef, useState } from "react";
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import SendIcon from '@mui/icons-material/Send';
+import List from '@mui/material/List';
+import Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import { ChatItem } from "./ChatItem";
+import Stack from '@mui/material/Stack';
+import { uniqueId } from 'lodash';
+import Typography from "@mui/material/Typography";
+import { Editor } from "./Editor";
+
+interface Message {
+  id: string;
+  message: string;
+  isMe: boolean;
+}
+
+const SupportedBlock = ['BotMessage', 'Chat', 'EmailSender', 'Script'];
+
+export const Create = () => {
+  const [chatList, setChatList] = useState<Message[]>([]);
+  const [workflowName, setWorkFlowName] = useState('My workflow');
+  const [chatInput, setChatInput] = useState('');
+  const chatContentRef = useRef<HTMLUListElement>(null);
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setChatInput(e.target.value);
+  };
+
+  const handleClickChip = (text: string) => () => {
+    setChatInput(s => s + text);
+  };
+  const handleSend = () => {
+    setChatList([...chatList, {
+      id: uniqueId(),
+      message: chatInput,
+      isMe: true
+    }]);
+    setChatInput('');
+  };
+
+  useEffect(() => {
+    if (chatContentRef.current) {
+      chatContentRef.current.scrollTop = chatContentRef.current.scrollHeight - chatContentRef.current.offsetHeight;
+    }
+  }, [chatList]);
+
+  return (
+    <>
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <TextField value={workflowName} focused fullWidth variant="outlined" label="Workflow Name"
+                     placeholder="Please name your workflow" onChange={e => {
+            setWorkFlowName(e.target.value);
+          }}/>
+
+        </Grid>
+        <Grid item xs={12}>
+          <Grid container spacing={2}>
+            <Grid item xs>
+              <Box sx={{ border: 1, height: 600, borderRadius: 1, mt: 4, borderColor: 'rgba(0,0,0,0.23)' }}>
+                <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+                  <List ref={chatContentRef}
+                        style={{ flex: '1 1 auto', overflowY: 'auto', overflowX: 'hidden' }}
+                        sx={{ p: 2 }}>
+                    {chatList.map(chat => <ChatItem isMe={chat.isMe} message={chat.message} key={chat.id}/>)}
+                  </List>
+                  <Box sx={{ display: 'flex', flex: '0 0 auto', p: 2, borderTop: 1, borderColor: 'divider' }}>
+                    <Grid container spacing={2}>
+                      <Grid item xs={12} style={{ gap: 8 }}>
+                        <Stack direction="row" spacing={1}>
+                          <Typography variant="body2">
+                            Supported Action Types:
+                          </Typography>
+                          {SupportedBlock.map(label => (
+                            <Chip label={label} key={label} size="small" clickable
+                                  onClick={handleClickChip(label)}/>))}
+                        </Stack>
+                      </Grid>
+                      <Grid item xs>
+                        <OutlinedInput fullWidth size="small" onChange={handleChange}
+                                       onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+                                         if (e.key === 'Enter' && chatInput.length) {
+                                           e.preventDefault();
+                                           handleSend();
+                                         }
+                                       }}
+                                       multiline maxRows={3}
+                                       value={chatInput}/>
+                      </Grid>
+                      <Grid item xs="auto" justifyContent="center">
+                        <Button variant="contained" size="large" disabled={!chatInput.length} onClick={handleSend}>
+                          <SendIcon/>
+                        </Button>
+                      </Grid>
+                    </Grid>
+                  </Box>
+                </div>
+              </Box>
+            </Grid>
+            <Grid item xs={4}>
+              <Box sx={{ border: 1, height: 600, borderRadius: 1, p: 2, mt: 4, borderColor: 'rgba(0,0,0,0.23)' }}>
+                Preview
+              </Box>
+            </Grid>
+          </Grid>
+          <Divider sx={{ mt: 4, mb: 4 }}/>
+          <Editor/>
+
+          {`
+          
+          {Script} \n\n
+          {EmailSender} \n\n
+          {RC Bot add-in}  \n\n
+        
+          `}
+
+        </Grid>
+      </Grid>
+      <Box
+        sx={{
+          position: 'fixed',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          p: 2,
+          boxShadow: 2,
+          borderTop: 1,
+          borderColor: 'divider',
+          display: { xs: 'flex' }, justifyContent: "flex-end"
+        }}>
+        <Button variant="contained" style={{ width: 100 }}>Save</Button>
+      </Box>
+    </>
+  );
+};

src/Editor.tsx

@@ -0,0 +1,41 @@
+/*
+ * @Author       : Eleanor Mao
+ * @Date         : 2024-04-09 16:24:25
+ * @LastEditTime : 2024-04-09 16:24:25
+ *
+ * Copyright © RingCentral. All rights reserved.
+ */
+
+import React, { useRef, useEffect } from 'react';
+import * as monaco from 'monaco-editor';
+
+// @ts-ignore
+// eslint-disable-next-line no-restricted-globals
+self.MonacoEnvironment = {
+  getWorkerUrl: function (_moduleId: any, label: string) {
+    if (label === 'json') {
+      return './json.worker.bundle.js';
+    }
+    if (label === 'typescript' || label === 'javascript') {
+      return './ts.worker.bundle.js';
+    }
+    return './editor.worker.bundle.js';
+  }
+};
+
+export const Editor: React.FC = () => {
+  const divEl = useRef<HTMLDivElement>(null);
+  let editor: monaco.editor.IStandaloneCodeEditor;
+  useEffect(() => {
+    if (divEl.current) {
+      editor = monaco.editor.create(divEl.current, {
+        value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+        language: 'javascript'
+      });
+    }
+    return () => {
+      editor.dispose();
+    };
+  }, []);
+  return <div className="Editor" ref={divEl}></div>;
+};

src/Home.tsx

@@ -0,0 +1,77 @@
+/*
+ * @Author       : Eleanor Mao
+ * @Date         : 2024-04-09 09:27:12
+ * @LastEditTime : 2024-04-09 09:27:12
+ *
+ * Copyright © RingCentral. All rights reserved.
+ */
+import React from "react";
+import { Outlet } from "react-router-dom";
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Toolbar from '@mui/material/Toolbar';
+import Paper from '@mui/material/Paper';
+import IconButton from '@mui/material/IconButton';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import { styled } from '@mui/material/styles';
+
+const Layout = styled(Box)(({ theme }) => (
+  {
+    flex: 'auto',
+    display: 'flex',
+    minHeight: 0,
+    height: '100vh',
+    flexDirection: 'column',
+    boxSizing: 'border-box',
+    background: theme.palette.background.default
+  }
+));
+
+
+const Content = styled(Box)(({ theme }) => ({
+  minHeight: 0,
+  flex: 'auto',
+}));
+export const Home = () => {
+  return (
+    <Layout>
+      <AppBar position="static">
+        <Toolbar>
+          <Typography
+            variant="h6"
+            noWrap
+            component="div"
+            sx={{ flexGrow: 1, display: { xs: 'block' } }}
+          >
+            RingCentral AI Workflow Hub
+          </Typography>
+          <Box sx={{ display: { xs: 'block' } }}>
+            <IconButton
+              size="large"
+              edge="end"
+              aria-label="account of current user"
+              aria-haspopup="true"
+              color="inherit"
+            >
+              <AccountCircle/>
+            </IconButton>
+          </Box>
+        </Toolbar>
+      </AppBar>
+      <Content sx={{ m: 4, }}>
+        <Paper elevation={0} sx={{ background: 'none' }}>
+          <Outlet/>
+        </Paper>
+      </Content>
+    </Layout>
+  );
+};
+
+
+// style={{
+//   padding: 24,
+//   minHeight: `calc(100vh - 170px)`,
+//   background: theme.palette.background.paper,
+//   borderRadius: theme.shape.borderRadius,
+// }}

src/List.tsx

@@ -0,0 +1,70 @@
+/*
+ * @Author       : Eleanor Mao
+ * @Date         : 2024-04-09 09:38:20
+ * @LastEditTime : 2024-04-09 09:38:20
+ *
+ * Copyright © RingCentral. All rights reserved.
+ */
+import React, { useState } from "react";
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import CardActionArea from '@mui/material/CardActionArea';
+import Switch from '@mui/material/Switch';
+import { Link } from "react-router-dom";
+import AddIcon from '@mui/icons-material/Add';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+
+
+interface ListItem {
+  id: string;
+  active: boolean;
+  title: string;
+}
+
+const Flex = styled(Box)(() => ({
+  display: 'flex',
+}));
+
+export const List = () => {
+  const [list] = useState<ListItem[]>([{
+    id: 'a',
+    title: 'Workflow 1',
+    active: true
+  }]);
+  return (
+    <>
+      <Flex style={{ justifyContent: 'flex-end' }}>
+        <Button startIcon={<AddIcon/>} variant="contained" href={`/create`}>Create Workflow</Button>
+      </Flex>
+      <Flex sx={{ gap: 2 }}>
+        {list.map(item => (
+          <Link
+            key={item.id}
+            to={`/detail/${item.id}`}
+          >
+            <Card sx={{ width: 280, borderRadius: 2, boxShadow: 2 }}>
+              <CardActionArea>
+                <CardContent>
+                  <Typography gutterBottom variant="h5" component="div">
+                    {item.title}
+                  </Typography>
+                  <Box sx={{ minHeight: 60 }}>
+                    <img style={{ width: 20, height: 20 }}
+                         src="https://netstorage.ringcentral.com/appext/gallery-page/images/25e9f677-5605-4092-a6c3-69de29a81d8d.svg"
+                         alt="rc"/>
+                  </Box>
+                </CardContent>
+                <CardActions sx={{ display: { xs: 'flex' }, justifyContent: "flex-end" }}>
+                  <Switch defaultChecked/>
+                </CardActions>
+              </CardActionArea>
+            </Card>
+          </Link>))}
+      </Flex>
+    </>
+  );
+};

src/index.css

@@ -11,3 +11,18 @@ code {
     font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+
+.ant-card .ant-card-actions > li:not(:last-child) {
+    border-right-width: 0;
+}
+
+a {
+    text-decoration: none;
+}
+
+.Editor {
+    width: 800px;
+    height: 600px;
+    border: 1px solid #ccc;
+}

src/index.tsx

@@ -1,19 +1,36 @@
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import './index.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import {} from '@mui/material/colors';
+
+import CssBaseline from '@mui/material/CssBaseline';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
+const theme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#3f51b5',
+    },
+    tonalOffset: 0.6,
+    secondary: {
+      main: '#f50057',
+    },
+  },
+});
 root.render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider theme={theme}>
+      <CssBaseline/>
+      <App/>
+    </ThemeProvider>
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

src/tool.html

@@ -0,0 +1,84 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Input Box and Button</title>
+    <style>
+        .container {
+            display: flex;
+            flex-direction: row;
+            overflow-x: auto;
+            align-items: center;
+
+        }
+        .inputBox {
+            margin-left: 1%;
+            width: 700px;
+            height: 800px;
+            flex-shrink: 0;
+        }
+        .submit {
+            margin-left: 1%;
+            width: 100px;
+            height: 50px;
+            flex-shrink: 0;
+        }
+        .outputBox {
+            margin-left: 1%;
+            width: 700px;
+            height: 800px;
+            flex-shrink: 0;
+        }
+        .image {
+            margin-left: 1%;
+            flex-shrink: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <textarea id="inputBox" class="inputBox" placeholder="DSL..."></textarea>
+        <button class="submit" onclick="handleButtonClick()">Submit</button>
+        <textarea id="outputBox" class="outputBox" placeholder="PlantUML..."></textarea>
+        <img id="outputImage" class="image" style="display: none" src="" alt="PlantUML Image">
+    </div>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/js-yaml/dist/js-yaml.min.js"></script>
+    <script src="transform.js"></script>
+    <script async="" src="https://cdn-0.plantuml.com/synchro2.min.js"></script>
+    <script>
+
+        function compress(s, pre) {
+            //UTF8
+            s = unescape(encodeURIComponent(s));
+            var arr = [];
+            for (var i = 0; i < s.length; i++) {
+                arr.push(s.charCodeAt(i));
+            }
+            var compressor = new Zopfli.RawDeflate(arr);
+            var compressed = compressor.compress();
+            return "http://www.plantuml.com/plantuml" + pre + encode64_(compressed);
+        }
+
+        function handleButtonClick() {
+            const inputValue = document.getElementById('inputBox').value;
+            const definition = jsyaml.load(inputValue)
+            let outputValue;
+            try {
+                outputValue = transformDSL(definition)
+                document.getElementById('outputBox').value = outputValue
+                const imgUrl = compress(outputValue, '/svg/');
+                document.getElementById('outputImage').src = imgUrl;
+                document.getElementById('outputImage').style.display = 'block';
+
+            } catch (error) {
+                document.getElementById('outputBox').value = error.message
+                console.error(error);
+            }
+        }
+    </script>
+</body>
+
+</html>

src/transform.js

@@ -0,0 +1,176 @@
+const EVENT_COLOR = "#LightYellow";
+const HTTP_COLOR = "#Peru";
+const SCRIPT_COLOR = "#Olive;text:white";
+const BOT_COLOR = "#Blue;text:white";
+const EMAIL_SENDER_COLOR = "#Red;text:white";
+
+const EVENT_NAME = ": Event";
+const HTTP_NAME = ": Http";
+const SCRIPT_NAME = ": Script";
+const BOT_NAME = ": Chat";
+const EMAIL_SENDER_NAME = ": EmailSender";
+
+function isHttp(actions) {
+  return actions
+    .map((action) => action.actionType)
+    .some((type) => type == "HttpRequest");
+}
+
+function isScript(actions) {
+  return actions
+    .map((action) => action.actionType)
+    .some((type) => type == "Script");
+}
+
+function isChat(actions) {
+  return actions
+      .map((action) => action.actionType)
+      .some((type) => type == "Chat");
+}
+
+function isEmailSender(actions) {
+  return actions
+      .map((action) => action.actionType)
+      .some((type) => type == "EmailSender");
+}
+
+function isEmpty(arr) {
+  return arr === undefined || arr == null || arr.length == 0;
+}
+
+function isNotBlank(str) {
+  return str !== undefined && str !== null && str.trim() !== "";
+}
+
+function drawState(eventState, state) {
+  let sb = "";
+  const name = state.name;
+  const actions = state.actions;
+  const handlers = state.eventHandlers;
+  if (isEmpty(actions)) {
+    if (isEmpty(handlers)) {
+      throw Error(`state ${name} handlers must not empty`);
+    }
+    let events = new Set()
+    for (const handle of handlers) {
+      const stateName = handle.eventType;
+      events.add(stateName)
+      sb += `state ${stateName} ${EVENT_COLOR} ${EVENT_NAME}\n`;
+    }
+    eventState.set(name, events);
+  } else {
+    if (isHttp(actions)) {
+      sb += `state ${name} ${HTTP_COLOR} ${HTTP_NAME}\n`;
+    } else if (isScript(actions)) {
+      sb += `state ${name} ${SCRIPT_COLOR} ${SCRIPT_NAME}\n`;
+    } else if (isChat(actions)) {
+      sb += `state ${name} ${BOT_COLOR} ${BOT_NAME}\n`;
+    } else if (isEmailSender(actions)) {
+      sb += `state ${name} ${EMAIL_SENDER_COLOR} ${EMAIL_SENDER_NAME}\n`;
+    } else {
+      throw Error(`state ${name} actions is incorrect`);
+    }
+  }
+  return sb;
+}
+
+function append(from, to, description) {
+  if (isNotBlank(description)) {
+    description = ": " + description;
+  }
+  return `${from} ---> ${to}${description}\n`;
+}
+
+function wrapCond(cond) {
+  if (isNotBlank(cond)) {
+    return "(" + cond + ")";
+  } else {
+    return null;
+  }
+}
+
+function drawTransitionCondition(eventCondition, transition) {
+  const list = [];
+  if (eventCondition !== undefined && eventCondition !== null) {
+    list.push(eventCondition);
+  }
+  const transitionName = transition.transitionName;
+  if (transitionName !== undefined && transitionName !== null) {
+    list.push(`(TransitionName == ${transitionName})`);
+  }
+  const condition = transition.condition;
+  if (condition !== undefined && condition !== null) {
+    list.push(condition);
+  }
+  return list.join(" && ");
+}
+
+function drawExitCondition(eventCondition, exit) {
+  const list = [];
+  if (eventCondition !== undefined && eventCondition !== null) {
+    list.push(eventCondition);
+  }
+  if (exit.condition !== undefined && exit.condition !== null) {
+    list.push(exit.condition);
+  }
+  return list.join(" && ");
+}
+
+function drawStateLine(eventState, state) {
+  const handlers = state.eventHandlers;
+  if (isEmpty(handlers)) {
+    return;
+  }
+
+  let sb = "";
+  const name = state.name;
+  for (const handler of handlers) {
+    let sourceState;
+    if (eventState.has(name)) {
+      sourceState = handler.eventType;
+    } else {
+      sourceState = name;
+    }
+    const eventCondition = wrapCond(handler.condition);
+    const actions = handler.actions;
+    for (const action of actions) {
+      const actionType = action.actionType
+      let targetState = action.targetState
+      if (actionType === "Transition") {
+        if (eventState.has(targetState)) {
+          let events = eventState.get(targetState)
+          if(events.size > 1) {
+            continue
+          } else {
+            targetState = events.values().next().value
+          }
+        }
+        const desc = drawTransitionCondition(eventCondition, action);
+        sb += append(sourceState, targetState, desc);
+      } else if (actionType === "Exit") {
+        const desc = drawExitCondition(eventCondition, action);
+        sb += append(sourceState, "[*]", desc);
+      }
+    }
+  }
+  return sb;
+}
+
+function transformDSL(definition) {
+  let sb = "";
+  const eventState = new Map();
+  const states = definition["states"];
+  for (const state of states) {
+    sb += drawState(eventState, state);
+  }
+  for (const state of states) {
+    sb += drawStateLine(eventState, state);
+  }
+  return `@startuml
+
+${sb}
+@enduml
+      `;
+}
+
+module.exports = { transformDSL };