Skip to content

Commit 93b50e9

Browse files
ChkhikvadzeChkhikvadze
authored
Merge pull request #279 from l3vels/feat/voice-module
Feat/voice module
2 parents e72cf2b + 8de0934 commit 93b50e9

23 files changed

+385
-140
lines changed

‎apps/server/typings/agent.py

+12
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,12 @@ class ConfigInput(BaseModel):
3434
greeting: Optional[str]
3535
text: Optional[str]
3636
source_flow: Optional[str]
37+
synthesizer: Optional[str]
38+
default_voice: Optional[str]
39+
voice_id: Optional[str]
40+
transcriber: Optional[str]
41+
response_mode: Optional[List[str]]
42+
input_mode: Optional[List[str]]
3743

3844

3945
class AgentConfigInput(BaseModel):
@@ -53,6 +59,12 @@ class ConfigsOutput(BaseModel):
5359
greeting: Optional[str]
5460
text: Optional[str]
5561
source_flow: Optional[str]
62+
synthesizer: Optional[str]
63+
default_voice: Optional[str]
64+
voice_id: Optional[str]
65+
transcriber: Optional[str]
66+
response_mode: Optional[List[str]]
67+
input_mode: Optional[List[str]]
5668

5769

5870
class AgentOutput(BaseModel):

‎apps/ui/src/components/Table/components/TableActionButtons.tsx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import styled from 'styled-components'
2+
import IconButton from '@l3-lib/ui-core/dist/IconButton'
3+
import {
4+
StyledDeleteIcon,
5+
StyledEditIcon,
6+
} from 'pages/TeamOfAgents/TeamOfAgentsCard/TeamOfAgentsCard'
7+
8+
type TableActionButtonsProp = {
9+
onDeleteClick?: () => void
10+
onEditClick?: () => void
11+
}
12+
13+
const TableActionButtons = ({ onDeleteClick, onEditClick }: TableActionButtonsProp) => {
14+
return (
15+
<StyledTableButtons>
16+
{onDeleteClick && (
17+
<IconButton
18+
onClick={onDeleteClick}
19+
icon={() => <StyledDeleteIcon />}
20+
size={IconButton.sizes.SMALL}
21+
kind={IconButton.kinds.TERTIARY}
22+
// ariaLabel='Delete'
23+
/>
24+
)}
25+
26+
{onEditClick && (
27+
<IconButton
28+
onClick={onEditClick}
29+
icon={() => <StyledEditIcon />}
30+
size={IconButton.sizes.SMALL}
31+
kind={IconButton.kinds.TERTIARY}
32+
// ariaLabel='Edit'
33+
/>
34+
)}
35+
</StyledTableButtons>
36+
)
37+
}
38+
39+
export default TableActionButtons
40+
41+
const StyledTableButtons = styled.div`
42+
display: flex;
43+
align-items: center;
44+
45+
height: 100%;
46+
`

‎apps/ui/src/pages/Agents/AgentForm/AgentForm.tsx

+18-13
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,14 @@ import RadioButton from '@l3-lib/ui-core/dist/RadioButton'
2323

2424
import UploadAvatar from 'components/UploadAvatar'
2525
import { StyledFormRoot, StyledFormInputWrapper } from 'styles/formStyles.css'
26-
import { StyledTextAreaWrapper } from 'pages/ApiKeys/EditApiKey/EditApiModal'
26+
import { StyledTab } from 'styles/tabStyles.css'
2727

2828
type AgentFormProps = {
2929
formik: any
30+
isVoice?: boolean
3031
}
3132

32-
const AgentForm = ({ formik }: AgentFormProps) => {
33+
const AgentForm = ({ formik, isVoice = true }: AgentFormProps) => {
3334
const { t } = useTranslation()
3435

3536
const { setFieldValue, values } = formik
@@ -49,8 +50,9 @@ const AgentForm = ({ formik }: AgentFormProps) => {
4950
agent_voice_synthesizer,
5051
agent_voice_transcriber,
5152
agent_voice_input_mode,
53+
agent_voice_response,
5254
} = values
53-
console.log('values', values)
55+
5456
const onTextareaChange = (field: string, value: string) => {
5557
formik.setFieldValue(field, value)
5658
}
@@ -59,7 +61,8 @@ const AgentForm = ({ formik }: AgentFormProps) => {
5961
modelOptions,
6062
datasourceOptions,
6163
toolOptions,
62-
voiceOptions,
64+
voiceSynthesizerOptions,
65+
voiceTranscriberOptions,
6366
handleUploadAvatar,
6467
avatarIsLoading,
6568
} = useAgentForm(formik)
@@ -93,7 +96,7 @@ const AgentForm = ({ formik }: AgentFormProps) => {
9396
<StyledTab onClick={() => setActiveTab(3)}>
9497
<StyledSpan isActive={activeTab === 3}>Onboarding</StyledSpan>
9598
</StyledTab>
96-
<StyledTab onClick={() => setActiveTab(4)}>
99+
<StyledTab onClick={() => setActiveTab(4)} isDisabled={!isVoice}>
97100
<StyledSpan isActive={activeTab === 4}>Voice Preferences</StyledSpan>
98101
</StyledTab>
99102
</StyledFormTabList>
@@ -288,7 +291,7 @@ const AgentForm = ({ formik }: AgentFormProps) => {
288291
fieldName={'agent_voice_synthesizer'}
289292
setFieldValue={setFieldValue}
290293
fieldValue={agent_voice_synthesizer}
291-
options={voiceOptions}
294+
options={voiceSynthesizerOptions}
292295
onChange={() => {
293296
setFieldValue('agent_voice_synthesizer', '')
294297
}}
@@ -311,7 +314,7 @@ const AgentForm = ({ formik }: AgentFormProps) => {
311314
fieldName={'agent_voice_transcriber'}
312315
setFieldValue={setFieldValue}
313316
fieldValue={agent_voice_transcriber}
314-
options={voiceOptions}
317+
options={voiceTranscriberOptions}
315318
onChange={() => {
316319
setFieldValue('agent_voice_transcriber', '')
317320
}}
@@ -329,17 +332,24 @@ const AgentForm = ({ formik }: AgentFormProps) => {
329332
text={t('text')}
330333
name='agent_voice_response'
331334
onSelect={() => setFieldValue('agent_voice_response', ['Text'])}
332-
defaultChecked
335+
checked={
336+
agent_voice_response?.length === 1 && agent_voice_response?.includes('Text')
337+
}
333338
/>
334339
<RadioButton
335340
text={t('voice')}
336341
name='agent_voice_response'
337342
onSelect={() => setFieldValue('agent_voice_response', ['Voice'])}
343+
checked={
344+
agent_voice_response?.length === 1 &&
345+
agent_voice_response?.includes('Voice')
346+
}
338347
/>
339348
<RadioButton
340349
text={`${t('text')} & ${t('voice')}`}
341350
name='agent_voice_response'
342351
onSelect={() => setFieldValue('agent_voice_response', ['Text', 'Voice'])}
352+
checked={agent_voice_response?.length === 2}
343353
/>
344354
</StyledFormInputWrapper>
345355

@@ -506,8 +516,3 @@ export const StyledTabPanelInnerWrapper = styled(TabPanel)`
506516
height: 100%;
507517
/* max-height: 800px; */
508518
`
509-
export const StyledTab = styled(Tab)`
510-
&.active .tab-inner {
511-
background-color: ${({ theme }) => theme.body.detailCardBackgroundColor};
512-
}
513-
`

‎apps/ui/src/pages/Agents/AgentForm/CreateAgentForm.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,14 @@ import { ButtonPrimary } from 'components/Button/Button'
1919
import { useCreateAgent } from '../useCreateAgent'
2020
import { t } from 'i18next'
2121
import { StyledFormWrapper } from 'styles/formStyles.css'
22+
import { useGetAccountModule } from 'utils/useGetAccountModule'
2223

2324
const CreateAgentForm = () => {
2425
const { formik, isLoading } = useCreateAgent()
2526

27+
const { getIntegrationModules } = useGetAccountModule()
28+
const voiceModule = getIntegrationModules('voices')
29+
const isVoiceCreate = voiceModule.create
2630
// const navigate = useNavigate()
2731

2832
return (
@@ -49,7 +53,7 @@ const CreateAgentForm = () => {
4953

5054
<ComponentsWrapper noPadding>
5155
<StyledFormWrapper>
52-
<AgentForm formik={formik} />
56+
<AgentForm formik={formik} isVoice={isVoiceCreate} />
5357
</StyledFormWrapper>
5458
</ComponentsWrapper>
5559
</StyledSectionWrapper>

‎apps/ui/src/pages/Agents/AgentForm/CreateAgentTempate.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ const StyledTemplatesWrapper = styled.div`
9999
max-height: 1000px;
100100
overflow-y: auto;
101101
padding: 0 20px;
102-
102+
width: 100%;
103103
/* max-width: 600px; */
104104
`
105105
const StyledTemplateHeader = styled.div`

‎apps/ui/src/pages/Agents/AgentForm/EditAgentForm.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,16 @@ import { ButtonPrimary } from 'components/Button/Button'
1717
import ComponentsWrapper from 'components/ComponentsWrapper/ComponentsWrapper'
1818
import { t } from 'i18next'
1919
import { StyledFormWrapper } from 'styles/formStyles.css'
20+
import { useGetAccountModule } from 'utils/useGetAccountModule'
2021

2122
const EditAgentForm = () => {
2223
const { t } = useTranslation()
2324
const { formik, isLoading, handleNavigation } = useEditAgent()
2425

26+
const { getIntegrationModules } = useGetAccountModule()
27+
const voiceModule = getIntegrationModules('voices')
28+
const isVoiceEdit = voiceModule.edit
29+
2530
return (
2631
<FormikProvider value={formik}>
2732
<StyledSectionWrapper>
@@ -47,7 +52,7 @@ const EditAgentForm = () => {
4752

4853
<ComponentsWrapper noPadding>
4954
<StyledFormWrapper>
50-
<AgentForm formik={formik} />
55+
<AgentForm formik={formik} isVoice={isVoiceEdit} />
5156
</StyledFormWrapper>
5257
</ComponentsWrapper>
5358
</StyledSectionWrapper>

‎apps/ui/src/pages/Agents/AgentForm/components/CustomField.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@ const StyledFieldsWrapper = styled.div`
6565
`
6666
const StyledCustomFieldWrapper = styled.div`
6767
display: flex;
68-
align-items: center;
68+
align-items: flex-end;
69+
6970
gap: 5px;
7071
`
7172
const StyledButtonWrapper = styled.div`

‎apps/ui/src/pages/Agents/AgentForm/useAgentForm.ts

+10-3
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,13 @@ export const useAgentForm = (formik: any) => {
3030
return { value: tool.toolkit_id, label: tool.name }
3131
})
3232

33-
const voiceOptions = voices
34-
?.filter((voice: any) => voice.is_active)
33+
const voiceSynthesizerOptions = voices
34+
?.filter((voice: any) => voice.is_active && voice.is_synthesizer)
35+
.map((voice: any) => {
36+
return { value: voice.id, label: voice.name }
37+
})
38+
const voiceTranscriberOptions = voices
39+
?.filter((voice: any) => voice.is_active && voice.is_transcriber)
3540
.map((voice: any) => {
3641
return { value: voice.id, label: voice.name }
3742
})
@@ -66,8 +71,10 @@ export const useAgentForm = (formik: any) => {
6671
modelOptions,
6772
datasourceOptions,
6873
toolOptions,
69-
voiceOptions,
74+
7075
handleUploadAvatar,
7176
avatarIsLoading,
77+
voiceSynthesizerOptions,
78+
voiceTranscriberOptions,
7279
}
7380
}

‎apps/ui/src/pages/Agents/useCreateAgent.ts

+13-6
Original file line numberDiff line numberDiff line change
@@ -71,12 +71,12 @@ export const useCreateAgent = () => {
7171
agent_text: agentById.configs?.text,
7272
agent_source_flow: agentById.configs?.source_flow,
7373

74-
agent_voice_synthesizer: '',
75-
agent_default_voice: '',
76-
agent_voice_id: '',
77-
agent_voice_transcriber: '',
78-
agent_voice_response: ['Text'],
79-
agent_voice_input_mode: ['Text'],
74+
agent_voice_synthesizer: agentById.configs?.synthesizer,
75+
agent_default_voice: agentById.configs?.default_voice,
76+
agent_voice_id: agentById.configs?.voice_id,
77+
agent_voice_transcriber: agentById.configs?.transcriber,
78+
agent_voice_response: agentById.configs?.response_mode,
79+
agent_voice_input_mode: agentById.configs?.input_mode,
8080
}
8181
}
8282

@@ -101,6 +101,13 @@ export const useCreateAgent = () => {
101101
greeting: values.agent_greeting,
102102
text: values.agent_text,
103103
avatar: values.agent_avatar,
104+
105+
synthesizer: values.agent_voice_synthesizer,
106+
default_voice: values.agent_default_voice,
107+
voice_id: values.agent_voice_id,
108+
transcriber: values.agent_voice_transcriber,
109+
response_mode: values.agent_voice_response,
110+
input_mode: values.agent_voice_input_mode,
104111
}
105112

106113
const newAgent = await createAgentService(agentInput)

‎apps/ui/src/pages/Agents/useEditAgent.ts

+14
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,13 @@ export const useEditAgent = () => {
4646
agent_suggestions: agentById?.configs?.suggestions,
4747
agent_greeting: agentById?.configs?.greeting,
4848
agent_text: agentById?.configs?.text || '',
49+
50+
agent_voice_synthesizer: agentById?.configs?.synthesizer,
51+
agent_default_voice: agentById?.configs?.default_voice,
52+
agent_voice_id: agentById?.configs?.voice_id,
53+
agent_voice_transcriber: agentById?.configs?.transcriber,
54+
agent_voice_response: agentById?.configs?.response_mode,
55+
agent_voice_input_mode: agentById?.configs?.input_mode,
4956
}
5057

5158
const handleSubmit = async (values: any) => {
@@ -69,6 +76,13 @@ export const useEditAgent = () => {
6976
suggestions: values.agent_suggestions,
7077
greeting: values.agent_greeting,
7178
text: values.agent_text,
79+
80+
synthesizer: values.agent_voice_synthesizer,
81+
default_voice: values.agent_default_voice,
82+
voice_id: values.agent_voice_id,
83+
transcriber: values.agent_voice_transcriber,
84+
response_mode: values.agent_voice_response,
85+
input_mode: values.agent_voice_input_mode,
7286
}
7387

7488
await updateAgent(agentId || '', {

0 commit comments

Comments
 (0)