From 6511dc8941fcedb12f2aa2a5c83d22b216f2f757 Mon Sep 17 00:00:00 2001 From: Eleanor Mao Date: Mon, 15 Apr 2024 09:54:59 +0800 Subject: [PATCH] feat: update --- public/favicon.ico | Bin 3870 -> 1597 bytes public/index.html | 3 +- src/AIBot.tsx | 2 +- src/ChatItem.tsx | 3 +- src/Create.tsx | 205 +++++++++++++++++++++++++++++++------------- src/Editor.tsx | 2 +- src/EmailSender.tsx | 6 +- src/GlipSender.tsx | 97 ++++++++++++++++----- src/List.tsx | 28 ++++-- src/index.css | 4 + src/loadYml.ts | 1 - src/transform.ts | 46 ++++++---- 12 files changed, 277 insertions(+), 120 deletions(-) diff --git a/public/favicon.ico b/public/favicon.ico index a11777cc471a4344702741ab1c8a588998b1311a..f416549c5dad7b60f8f9dfd83a14454b5fe4a33a 100644 GIT binary patch literal 1597 zcmV-D2EzG?P)y3+1=yQ`yF6l_pmet@60pjoc+!|zvuhrJMWw$(k^AD zs}+~C-IL3Hy`8(b6I}L=sfj$87xQG^B3(6*?q;OUcFpCo-G;ba`eT+GxC`4RR+bBC ztCn1J-%no5lX)}7K>8*lO?aBKA(y_Tfy;3PmriEqw+NNK8C-@FdeU4_mb4ogG5Zi5 z`3a&T_v3ubM<`Bw8&A_***$dcCLJE+O$^3jOdbx1UQ(wy=5b#+gG+NHIgK5e&N=Y< z`ODqd6YLAipbXf?7UGSJYV6Cq!|TlpHL!~-qOnZ87vzup_;*MDH|nG5O)SP_Y>_g- z){;A8ujI~d0GFzzvo@$rbj1#N2&|$C5m?lW`i?CQ-V3pgzw_vcb^Vos`aQ>35%FwM1_4oKyytNu|-^*ImWaa^-(r34fq;mt$moT zYUmt*Y4CSYL^u$`4C9y-AjTA9GQoBq8G>%NV!G>8#bY@71Vc%TaZCyj^%{m{jDk=* zSki9qrwupVr6Nn4cm*zpIPt6zE(JKT0=!NdV2{t|H2XG;FQxhg5^JB}$jx?m6t&}v z33Qmo&i&C1?q71Bs_ekdqhew$#|W1KgwsX10lGttVCkQN-@Ar1cQQTquf{iEc}zVF zb%>3bCf&iq9wkPrnKoZrpGs>(s$db6g|=fWc_y(bKm^p2^rEwf_RB z{pTXe%VEL*ik4n13n`vdOM{DH5?zK}mm07*;1>Uzp8OV)tJ)_B@F#q|T!=Xb#HIkg zbD{Qq8Rxv#;;qa&VSwfy=m!=-Uw(5$MS|lJIvRx)BdhK)Y)@BWk#7MOk`gP0{lq=5 z3DHtpo=I#9;Qb2J-m~$GbUEzf3c*3MO8)A`62G6I=Q|=lp%(kzz%qFu?mrtq_n-=g z^P8|x_9J3To1tBsPnY7VWF^leHU;pa6Vg+!Ik50c#@%O1%@v>k3#9p&FV3f7-phHIu9eef(c)H_wX$Qs^o6+7&HL!}k4eL|I z6N-&}dZixERccIDDK$^vCO*Je69@P~VvP0lGBLzWe=BB|4$0-n7Mtk~pdvYok07$F z1Jhk+sh!(Nd@x81odKB2rAx6&o{Kta!P8WE?fk5#_0f*T93bd-dg&|~OX9`g=rIolxGq)l50r3tYoS2L)Qc7les{Pr8 zP>~WFm<4@p zK_2#~bV6HtRY?A|3mX&5v4J++4XM$@aAGkgV-J6rNN4A1u7XfG;#Jrw-VY0TI-HUe z*pu6cgVfg#kv`08VjYfeGH&97$ds&sauP4bVob&!{xtIt8LGTyHSh!8lLu*)&ZB;@ z000000NkvXXu0mjfd7bj) literal 3870 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ diff --git a/public/index.html b/public/index.html index 68c5af4..d02eafd 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,6 @@ - React App + RingCentral@Workflow Hub diff --git a/src/AIBot.tsx b/src/AIBot.tsx index e8f2c09..57e433e 100644 --- a/src/AIBot.tsx +++ b/src/AIBot.tsx @@ -23,7 +23,7 @@ export const AIBot: FC<{ Intelligence Admin Portal - diff --git a/src/ChatItem.tsx b/src/ChatItem.tsx index d27e205..b794c80 100644 --- a/src/ChatItem.tsx +++ b/src/ChatItem.tsx @@ -40,7 +40,8 @@ const ChatMessageWrap = styled(Box)<{ isMe: boolean }>(({ isMe }) => ({ marginTop: 4, marginBottom: 4, display: 'flex', - justifyContent: isMe ? 'flex-end' : 'flex-start' + justifyContent: isMe ? 'flex-end' : 'flex-start', + color: isMe ? 'rgba(0, 0, 0, 0.87)' : 'white' })); const ChatMessage = styled(Box)(() => ({ diff --git a/src/Create.tsx b/src/Create.tsx index b57e9b6..42b07f2 100644 --- a/src/Create.tsx +++ b/src/Create.tsx @@ -12,10 +12,8 @@ import Button from '@mui/material/Button'; import TextField from '@mui/material/TextField'; 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 { cloneDeep, uniqueId } from 'lodash'; import Typography from "@mui/material/Typography"; import { useLocation, useNavigate, useParams } from "react-router-dom"; @@ -29,7 +27,11 @@ import { AIBot } from "./AIBot"; import { GlipSender } from "./GlipSender"; import { ScriptBlock } from "./Script"; import { message } from 'mui-message'; -import { isChatBot } from "./transform"; +import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'; +import InputAdornment from "@mui/material/InputAdornment"; +import Stack from '@mui/material/Stack'; +import Switch from '@mui/material/Switch'; +import { styled } from "@mui/material/styles"; const DefaultMessage = [ 'Hello! Please tell me what kind of workflow you want to generate!\n', @@ -55,7 +57,7 @@ type PreValue = string | undefined | null const preValueObj: { bot: PreValue; script: PreValue; email: PreValue; glip: PreValue } = { bot: '', script: '', - email: '', + email: '{"to":"","subject":"","content":"${localData.Desc}"}', glip: '' }; @@ -66,7 +68,48 @@ interface Message { loading?: boolean; } -const SupportedBlock = ['BotMessage', 'Chat', 'GlipSender', 'Script']; +interface ActionWithStateName extends Action { + stateName: string; +} + +const AntSwitch = styled(Switch)(({ theme }) => ({ + width: 28, + height: 16, + padding: 0, + display: 'flex', + '&:active': { + '& .MuiSwitch-thumb': { + width: 15, + }, + '& .MuiSwitch-switchBase.Mui-checked': { + transform: 'translateX(9px)', + }, + }, + '& .MuiSwitch-switchBase': { + padding: 2, + '&.Mui-checked': { + transform: 'translateX(12px)', + color: '#fff', + '& + .MuiSwitch-track': { + opacity: 1, + }, + }, + }, + '& .MuiSwitch-thumb': { + boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)', + width: 12, + height: 12, + borderRadius: 6, + transition: theme.transitions.create(['width'], { + duration: 200, + }), + }, + '& .MuiSwitch-track': { + borderRadius: 16 / 2, + opacity: 1, + boxSizing: 'border-box', + }, +})); export const Create: FC<{ edit?: boolean }> = ({ edit }) => { const { id } = useParams(); @@ -88,22 +131,16 @@ export const Create: FC<{ edit?: boolean }> = ({ edit }) => { const flowDefinition = useMemo(() => DSL2Json(workflowContent), [workflowContent]); const previewImg = useMemo(() => Json2Preview(flowDefinition), [flowDefinition]); const chatContentRef = useRef(null); - const actions = useMemo(() => ((flowDefinition || {}).states || []).reduce>(() => ((flowDefinition || {}).states || []).reduce>((l, s) => { + }>>((l, s) => { l.push(...s.actions.map(a => ({ ...a, stateName: s.name }))); return l; }, []), [flowDefinition]); - const hasEmailSender = useMemo(() => actions.some(a => a.actionType === "EmailSender"), [actions]); - const botAddinAction = useMemo(() => actions.find(a => a.actionType === "Chat"), [actions]); - const scriptAction = useMemo(() => actions.find(a => a.actionType === "Script"), [actions]); - const glipSenderAction = useMemo(() => actions.find(a => a.actionType === "GlipSender"), [actions]); + const emailSenderAction = useMemo(() => actions.find(a => a.actionType === "EmailSender"), [actions]); + const botAddinAction = useMemo(() => actions.find(a => a.actionType === "Chat"), [actions]); + const scriptAction = useMemo(() => actions.find(a => a.actionType === "Script"), [actions]); + const glipSenderAction = useMemo(() => actions.find(a => a.actionType === "GlipSender"), [actions]); const [aibot, setAIBot] = useState(''); const [script, setScript] = useState(''); const [emailData, setEmailData] = useState({ @@ -112,14 +149,11 @@ export const Create: FC<{ edit?: boolean }> = ({ edit }) => { // eslint-disable-next-line no-template-curly-in-string content: '${localData.Desc}', }); - const [glipSenderData, setGlipSenderData] = useState({ - clientId: '', - clientSecret: '', - // eslint-disable-next-line no-template-curly-in-string - message: '' - }); - const [channelId, setChannelId] = useState('78394499078-4034902020'); + const [glipSenderData, setGlipSenderData] = useState(''); + const [isImageMode, setImageMode] = useState(true); + const creatorId = '4034902020'; const location = useLocation(); + const [teamLink, setTeamLink] = useState(''); const debug = useMemo(() => { return (new URLSearchParams(location.search)).get('debug') === 'true'; }, [location]); @@ -148,9 +182,6 @@ export const Create: FC<{ edit?: boolean }> = ({ edit }) => { setChatInput(e.target.value); }; - const handleClickChip = (text: string) => () => { - setChatInput(s => s + text); - }; const handleSend = async () => { const rId = uniqueId('r'); @@ -185,24 +216,15 @@ export const Create: FC<{ edit?: boolean }> = ({ edit }) => { useEffect(() => { if (glipSenderAction) { let actionValueString = glipSenderAction.message; - let crtValueString = glipSenderData.message; - if (actionValueString !== preValueObj.glip && crtValueString === preValueObj.glip) { - setGlipSenderData({ - clientSecret: '', - clientId: '', - message: actionValueString || '', - }); + if (actionValueString !== preValueObj.glip && glipSenderData === preValueObj.glip) { + setGlipSenderData(actionValueString || ''); preValueObj.glip = actionValueString || ''; } } else { if (preValueObj.glip) { preValueObj.glip = ''; - setGlipSenderData({ - clientSecret: '', - clientId: '', - // eslint-disable-next-line no-template-curly-in-string - message: '${localData.Desc}' - }); + // eslint-disable-next-line no-template-curly-in-string + setGlipSenderData('${localData.Desc}'); } } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -232,7 +254,35 @@ export const Create: FC<{ edit?: boolean }> = ({ edit }) => { } // eslint-disable-next-line react-hooks/exhaustive-deps }, [botAddinAction]); - + useEffect(() => { + if (emailSenderAction) { + const newValueStr = JSON.stringify({ + to: emailSenderAction.to || '', + subject: emailSenderAction.subject || '', + content: emailSenderAction.content || '' + }); + const crtValueStr = JSON.stringify({ + to: emailData.to, + subject: emailData.subject, + content: emailData.content + }); + if (newValueStr !== preValueObj.email && crtValueStr === preValueObj.email) { + setEmailData({ + to: emailSenderAction.to || '', + subject: emailSenderAction.subject || '', + content: emailSenderAction.content || '' + }); + preValueObj.email = newValueStr || ''; + } + } else { + setEmailData({ + to: '', + subject: '', + // eslint-disable-next-line no-template-curly-in-string + content: '${localData.Desc}', + }); + } + }, [emailSenderAction]); useEffect(() => { if (chatContentRef.current) { chatContentRef.current.scrollTop = chatContentRef.current.scrollHeight - chatContentRef.current.offsetHeight; @@ -250,15 +300,7 @@ export const Create: FC<{ edit?: boolean }> = ({ edit }) => { setWorkflowContent(''); }; - useEffect(() => { - if (!hasEmailSender) - setEmailData({ - to: '', - subject: '', - // eslint-disable-next-line no-template-curly-in-string - content: '${localData.Desc}', - }); - }, [hasEmailSender]); + const navigate = useNavigate(); const handleSubmit = async () => { if (!flowDefinition) return; @@ -278,11 +320,14 @@ export const Create: FC<{ edit?: boolean }> = ({ edit }) => { } if (action.actionType === 'GlipSender') { // action.url = glipSenderData.url; - action.message = glipSenderData.message || '${localData.Desc}'; + // eslint-disable-next-line no-template-curly-in-string + action.message = glipSenderData || '${localData.Desc}'; } }); }); console.log(Json2Yml(newJson)); + const channelId = (teamLink.replace(/[^\d]+/, '')) + '-' + creatorId; + console.log(channelId); await axios.put(`/bot/workflow/${id}`, { name: formJson.name, content: Json2Yml(newJson) @@ -291,7 +336,7 @@ export const Create: FC<{ edit?: boolean }> = ({ edit }) => { await axios.delete(`/bot/workflow/${id}/bind/${channelId}`); await axios.post(`/bot/workflow/${id}/bind`, { channelId }); } - message.success(`Saved! ${debug ? 'Back to List and go bind your channel!' : ''}`); + message.success(`Publish Success! ${debug ? 'Back to List and go bind your channel!' : ''}`); setTimeout(() => { navigate(`/${debug ? '?debug=true' : ''}`); }, 3000); @@ -356,6 +401,9 @@ export const Create: FC<{ edit?: boolean }> = ({ edit }) => { } }} autoFocus + InputProps={{ + startAdornment: + }} variant="outlined" focused placeholder="Enter your goal ..." multiline maxRows={3} @@ -372,21 +420,56 @@ export const Create: FC<{ edit?: boolean }> = ({ edit }) => { - - {!previewImg ? <>👋 The flow chart will be previewed here!
😻 Tell the AI robot what you want to - do! : - preview} + + {!previewImg ? +
👋 The flow chart will be previewed here!
😻 Tell the AI robot what + you want to + do!
: + ( + <> + + Raw + setImageMode(checked)}/> + Image + + {isImageMode ? + preview : + 
{workflowContent}
+ } + + ) + } - {!!scriptAction || hasEmailSender || !!botAddinAction ? + {!!scriptAction || !!emailSenderAction || !!botAddinAction || !!glipSenderAction ? - Please fill in the following information related to your workflow nodes. 👇🏻👇🏻 : null} - {hasEmailSender && } + Please fill in the following information related to your workflow nodes. 👇🏻👇🏻 : null} + {!!emailSenderAction && } {!!botAddinAction && } {!!scriptAction && } - {!!glipSenderAction && } + {!!glipSenderAction && + { + if (isTeamLink) { + setTeamLink(value); + } else { + setGlipSenderData(value); + } + }}/>}
@@ -404,7 +487,7 @@ export const Create: FC<{ edit?: boolean }> = ({ edit }) => { borderColor: 'divider', display: { xs: 'flex' }, justifyContent: "flex-end" }}> - + ); diff --git a/src/Editor.tsx b/src/Editor.tsx index f74bffb..de7f6b9 100644 --- a/src/Editor.tsx +++ b/src/Editor.tsx @@ -6,7 +6,7 @@ * */ -import React, { useState } from 'react'; +import React from 'react'; import MonacoEditor from 'react-monaco-editor'; export const Editor: React.FC<{ value: string; onChange: (value: string) => void }> = ({ value, onChange }) => { diff --git a/src/EmailSender.tsx b/src/EmailSender.tsx index a1d336d..61b0059 100644 --- a/src/EmailSender.tsx +++ b/src/EmailSender.tsx @@ -24,15 +24,15 @@ export const EmailSender: FC<{ Email Sender diff --git a/src/GlipSender.tsx b/src/GlipSender.tsx index 81283df..ef73b76 100644 --- a/src/GlipSender.tsx +++ b/src/GlipSender.tsx @@ -1,41 +1,94 @@ -import React, { ChangeEvent, FC, useEffect, useState } from 'react'; +import React, { ChangeEvent, FC, useState } 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'; +import InputAdornment from "@mui/material/InputAdornment"; +import IconButton from '@mui/material/IconButton'; +import Visibility from '@mui/icons-material/Visibility'; +import VisibilityOff from '@mui/icons-material/VisibilityOff'; +import { MenuItem, Select, SelectChangeEvent } from "@mui/material"; export const GlipSender: FC<{ + value: string; debug?: boolean - value: { clientId: string; clientSecret: string; message: string }; - onChange: (value: { - clientId: string; clientSecret: string; message: string - }) => void -}> = ({ value, debug, onChange }) => { + edit?: boolean + id?: string + teamLink: string + onChange: (value: string, isTeamLink?: boolean) => void +}> = ({ value, id,teamLink, debug, edit, onChange }) => { const handleChange = (e: ChangeEvent) => { - onChange({ - ...value, - [e.target.name]: e.target.value - }); + onChange(e.target.value); }; + const [showPassword, setShowPassword] = React.useState(edit ? false : true); + + const handleClickShowPassword = () => setShowPassword((show) => !show); + + const handleMouseDownPassword = (event: React.MouseEvent) => { + event.preventDefault(); + }; + + const [senderType, setSenderType] = useState('default'); + const handleChangeType = (e: SelectChangeEvent) => { + setSenderType(e.target.value); + }; + + const handleChangeTeam = (event: React.ChangeEvent) => { + onChange(event.target.value, true) + }; + + return ( - GlipSender - - WFL Hub will send messages via RingCentral Bot, please fill in: - + GlipSender {!debug && <> - - + + {senderType === 'default' ? <> + + WFL Hub will send message via default bot @David-Bot + + + : + <> + + WFL Hub will send messages via your RingCentral Bot, please + fill in: + + + + + {showPassword ? : } + + + ) + }} + /> + } + } diff --git a/src/List.tsx b/src/List.tsx index 4fef18b..669c2b6 100644 --- a/src/List.tsx +++ b/src/List.tsx @@ -39,6 +39,7 @@ interface Workflow { id: string; name: string; lastModifiedTime: string; + emoji?: string; } export const List = () => { @@ -52,7 +53,10 @@ export const List = () => { total: number workflows: Workflow[] }>('/api/public/wf/config/v1/account/10086/workflows').then(({ data }) => { - setList(data.workflows); + setList(data.workflows.map(it => ({ + ...it, + emoji: getRandomEmoji() + }))); }); }, []); const handleOpen = () => { @@ -84,7 +88,7 @@ export const List = () => { event.preventDefault(); const formData = new FormData(event.currentTarget); const formJson = Object.fromEntries((formData as any).entries()); - const channelId = formJson.channelId.trim(); + const channelId = `${formJson.groupId.trim()}-${formJson.creatorId.trim()}`; await axios.delete(`/bot/workflow/${showBindModal}/bind/${channelId}`); await axios.post(`/bot/workflow/${showBindModal}/bind`, { channelId }); message.success('Success!'); @@ -105,7 +109,7 @@ export const List = () => { - {getRandomEmoji()} {item.name || 'My Workflow'} + {item.emoji} {item.name || 'My Workflow'} { : - } + }}>Bind : } + {/**/} @@ -147,7 +151,6 @@ export const List = () => { margin="dense" id="name" name="name" - defaultValue="My workflow" label="Workflow Name" fullWidth focused @@ -169,10 +172,17 @@ export const List = () => { + diff --git a/src/index.css b/src/index.css index 0846f2c..6e535b3 100644 --- a/src/index.css +++ b/src/index.css @@ -30,3 +30,7 @@ a { .MuiButton-contained:hover { background-color: rgb(118, 126, 168) !important; } + +.Mui-focused .MuiOutlinedInput-notchedOutline { + /*color: #aab5f1*/ +} diff --git a/src/loadYml.ts b/src/loadYml.ts index 6b8bfb7..0afe03e 100644 --- a/src/loadYml.ts +++ b/src/loadYml.ts @@ -71,7 +71,6 @@ export interface Definition { export function Json2Preview(definition?: Definition): string { if (!definition) return ''; try { - console.log(transformDSL(definition)); return compress(transformDSL(definition), '/svg/'); } catch (e) { console.error(e); diff --git a/src/transform.ts b/src/transform.ts index 940bf73..ed14765 100644 --- a/src/transform.ts +++ b/src/transform.ts @@ -1,13 +1,12 @@ import { Action, Definition, State } from "./loadYml"; -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 CHAT_BOT_COLOR = "#Orange;text:white"; -const GLIP_COLOR = "#Pink;text:white"; -const DEFAULT_COLOR = '#Grey;text;white'; +const EVENT_COLOR = "#IndianRed"; +const HTTP_COLOR = "#Sienna"; +const SCRIPT_COLOR = "#Olive"; +const BOT_COLOR = "#RoyalBlue"; +const EMAIL_SENDER_COLOR = "#Crimson"; +const CHAT_BOT_COLOR = "#OrangeRed"; +const GLIP_COLOR = "#DeepPink"; const EVENT_NAME = ": Event"; const HTTP_NAME = ": Http"; @@ -15,33 +14,28 @@ const SCRIPT_NAME = ": Script"; const BOT_NAME = ": Chat"; const EMAIL_SENDER_NAME = ": EmailSender"; const GLIP_SENDER_NAME = ': GlipSender'; -const EXIT_NAME = ": Exit"; -function isHttp(actions: Action[]): boolean { +export function isHttp(actions: Action[]): boolean { return actions .some((action) => action.actionType === "HttpRequest"); } -function isScript(actions: Action[]): boolean { +export function isScript(actions: Action[]): boolean { return actions .some((action) => action.actionType === "Script"); } -function isChat(actions: Action[]): boolean { +export function isChat(actions: Action[]): boolean { return actions .some((action) => action.actionType === 'ChatBot'); } -function isGlipSender(actions: Action[]): boolean { +export function isGlipSender(actions: Action[]): boolean { return actions .some((action) => action.actionType === 'GlipSender'); } -function isExit(actions: Action[]): boolean { - return actions.some((action) => action.actionType === 'Exit'); -} - -function isEmailSender(actions: Action[]): boolean { +export function isEmailSender(actions: Action[]): boolean { return actions .some((action) => action.actionType === "EmailSender"); } @@ -188,8 +182,22 @@ export function transformDSL(definition: Definition): string { sb += drawStateLine(eventState, state) || ''; } return `@startuml - + skinparam backgroundColor #242425 + skinparam state { + FontColor white + BackgroundColor DimGray + BorderColor #AAB5F1 + ArrowColor #AAB5F1 + ArrowFontColor #AAB5F1 + } + + skinparam activity { + StartColor Silver + EndColor Silver + } + ${sb} + @enduml `; }