mirror of
https://github.com/leon-ai/leon.git
synced 2024-12-24 17:23:23 +03:00
feat(skill/timer): custom timer component
This commit is contained in:
parent
d77c975800
commit
470889a797
1
app/src/custom-aurora-components/index.ts
Normal file
1
app/src/custom-aurora-components/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './timer'
|
1
app/src/custom-aurora-components/timer/index.ts
Normal file
1
app/src/custom-aurora-components/timer/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './timer'
|
68
app/src/custom-aurora-components/timer/timer.tsx
Normal file
68
app/src/custom-aurora-components/timer/timer.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { CircularProgress, Flexbox, Text } from '@leon-ai/aurora'
|
||||
|
||||
interface TimerProps {
|
||||
initialTime: number
|
||||
interval: number
|
||||
totalTimeContent: string
|
||||
onEnd?: () => void
|
||||
}
|
||||
|
||||
function formatTime(seconds: number): string {
|
||||
const minutes = seconds >= 60 ? Math.floor(seconds / 60) : 0
|
||||
const remainingSeconds = seconds % 60
|
||||
const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes
|
||||
const formattedSeconds =
|
||||
remainingSeconds < 10 ? `0${remainingSeconds}` : remainingSeconds
|
||||
|
||||
return `${formattedMinutes}:${formattedSeconds}`
|
||||
}
|
||||
|
||||
export function Timer({
|
||||
initialTime,
|
||||
interval,
|
||||
totalTimeContent,
|
||||
onEnd
|
||||
}: TimerProps) {
|
||||
const [progress, setProgress] = useState(0)
|
||||
const [timeLeft, setTimeLeft] = useState(initialTime)
|
||||
|
||||
useEffect(() => {
|
||||
setTimeLeft(initialTime)
|
||||
setProgress(0)
|
||||
}, [initialTime])
|
||||
|
||||
useEffect(() => {
|
||||
if (timeLeft <= 0) {
|
||||
return
|
||||
}
|
||||
|
||||
const timer = setInterval(() => {
|
||||
setTimeLeft((prevTime) => {
|
||||
const newTime = prevTime - 1
|
||||
|
||||
if (newTime <= 0 && onEnd) {
|
||||
onEnd()
|
||||
}
|
||||
|
||||
return newTime
|
||||
})
|
||||
setProgress((prevProgress) => prevProgress + 100 / initialTime)
|
||||
}, interval)
|
||||
|
||||
return () => clearInterval(timer)
|
||||
}, [initialTime, interval, timeLeft])
|
||||
|
||||
return (
|
||||
<CircularProgress value={progress} size="lg">
|
||||
<Flexbox gap="xs" alignItems="center" justifyContent="center">
|
||||
<Text fontSize="lg" fontWeight="semi-bold">
|
||||
{formatTime(timeLeft)}
|
||||
</Text>
|
||||
<Text fontSize="xs" secondary>
|
||||
{totalTimeContent}
|
||||
</Text>
|
||||
</Flexbox>
|
||||
</CircularProgress>
|
||||
)
|
||||
}
|
@ -1,6 +1,8 @@
|
||||
import { createElement } from 'react'
|
||||
import * as auroraComponents from '@leon-ai/aurora'
|
||||
|
||||
import * as customAuroraComponents from '../custom-aurora-components'
|
||||
|
||||
export default function renderAuroraComponent(
|
||||
socket,
|
||||
component,
|
||||
@ -8,7 +10,18 @@ export default function renderAuroraComponent(
|
||||
) {
|
||||
if (component) {
|
||||
// eslint-disable-next-line import/namespace
|
||||
const reactComponent = auroraComponents[component.component]
|
||||
let reactComponent = auroraComponents[component.component]
|
||||
/**
|
||||
* Find custom component if a former component is not found
|
||||
*/
|
||||
if (!reactComponent) {
|
||||
// eslint-disable-next-line import/namespace
|
||||
reactComponent = customAuroraComponents[component.component]
|
||||
}
|
||||
|
||||
if (!reactComponent) {
|
||||
console.error(`Component ${component} not found`)
|
||||
}
|
||||
|
||||
// Check if the browsed component has a supported event and bind it
|
||||
if (
|
||||
|
@ -123,35 +123,6 @@ class Leon {
|
||||
}),
|
||||
supportedEvents: SUPPORTED_WIDGET_EVENTS
|
||||
}
|
||||
// dynamically import the TSX component
|
||||
/*const { default: tsxComponent } = await import(
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
'@@/skills/unknown/widget-playground/src/widgets/my-component.tsx'
|
||||
)
|
||||
console.log('tsxComponent', tsxComponent)
|
||||
const componentString = ReactDOMServer.renderToString(
|
||||
React.createElement(tsxComponent)
|
||||
)
|
||||
const componentEventHandlers = {
|
||||
onClick: () => {}
|
||||
}
|
||||
// const componentString = ReactDOMServer.renderToString(tsxComponent)
|
||||
|
||||
// Collect event handlers from the component
|
||||
React.Children.forEach(React.createElement(tsxComponent), (child) => {
|
||||
if (child.props && child.props.onClick) {
|
||||
componentEventHandlers.onClick = child.props.onClick.toString()
|
||||
}
|
||||
})
|
||||
const response = {
|
||||
componentString,
|
||||
componentEventHandlers
|
||||
}
|
||||
|
||||
console.log('componentString', componentString)
|
||||
|
||||
answerObject.output.widgetWithHandlers = response*/
|
||||
}
|
||||
|
||||
// "Temporize" for the data buffer output on the core
|
||||
|
@ -7,7 +7,10 @@ interface WidgetEvent {
|
||||
export const SUPPORTED_WIDGET_EVENTS = [
|
||||
'onClick',
|
||||
'onSubmit',
|
||||
'onChange'
|
||||
'onChange',
|
||||
'onStart',
|
||||
'onEnd',
|
||||
'onFetch'
|
||||
] as const
|
||||
|
||||
function generateId(): string {
|
||||
|
@ -3,13 +3,20 @@ import { type WidgetWrapperProps } from '@leon-ai/aurora'
|
||||
import { SKILL_CONFIG } from '@bridge/constants'
|
||||
import { WidgetComponent } from '@sdk/widget-component'
|
||||
|
||||
type UtteranceSender = 'leon' | 'owner'
|
||||
|
||||
interface SendUtteranceWidgetEventMethodParams {
|
||||
from: UtteranceSender
|
||||
utterance: string
|
||||
}
|
||||
interface RunSkillActionWidgetEventMethodParams {
|
||||
actionName: string
|
||||
params: Record<string, unknown>
|
||||
}
|
||||
interface SendUtteranceOptions {
|
||||
from?: UtteranceSender
|
||||
data?: Record<string, unknown>
|
||||
}
|
||||
|
||||
export interface WidgetEventMethod {
|
||||
methodName: 'send_utterance' | 'run_skill_action'
|
||||
@ -41,18 +48,20 @@ export abstract class Widget<T = unknown> {
|
||||
/**
|
||||
* Indicate the core to send a given utterance
|
||||
* @param key The key of the content
|
||||
* @param data The data to apply
|
||||
* @example content('provider_selected', { provider: 'Spotify' }) // 'I chose the Spotify provider'
|
||||
* @param options The options of the utterance
|
||||
* @example content('provider_selected', { data: { provider: 'Spotify' } }) // 'I chose the Spotify provider'
|
||||
*/
|
||||
protected sendUtterance(
|
||||
key: string,
|
||||
data?: Record<string, unknown>
|
||||
options?: SendUtteranceOptions
|
||||
): WidgetEventMethod {
|
||||
const utteranceContent = this.content(key, data)
|
||||
const utteranceContent = this.content(key, options?.data)
|
||||
const from = options?.from || 'owner'
|
||||
|
||||
return {
|
||||
methodName: 'send_utterance',
|
||||
methodParams: {
|
||||
from,
|
||||
utterance: utteranceContent
|
||||
}
|
||||
}
|
||||
@ -93,6 +102,10 @@ export abstract class Widget<T = unknown> {
|
||||
|
||||
let content = widgetContents[key]
|
||||
|
||||
if (Array.isArray(content)) {
|
||||
content = content[Math.floor(Math.random() * content.length)] as string
|
||||
}
|
||||
|
||||
if (data) {
|
||||
for (const key in data) {
|
||||
content = content.replaceAll(`%${key}%`, String(data[key]))
|
||||
|
@ -1,5 +1,10 @@
|
||||
{
|
||||
"endpoints": [
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/unknown/widget-playground/run",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "POST",
|
||||
"route": "/api/action/news/github_trends/run",
|
||||
@ -11,6 +16,58 @@
|
||||
"route": "/api/action/news/product_hunt_trends/run",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "POST",
|
||||
"route": "/api/action/games/akinator/choose_thematic",
|
||||
"params": ["thematic"],
|
||||
"entitiesType": "trim"
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/games/akinator/setup",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/games/akinator/guess",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/games/akinator/retry",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/games/guess_the_number/setup",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/games/guess_the_number/guess",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/games/guess_the_number/replay",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/games/rochambeau/start",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "POST",
|
||||
"route": "/api/action/games/rochambeau/play",
|
||||
"params": ["handsign"],
|
||||
"entitiesType": "trim"
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/games/rochambeau/rematch",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "POST",
|
||||
"route": "/api/action/productivity/todo_list/create_list",
|
||||
@ -133,88 +190,6 @@
|
||||
"route": "/api/action/leon/thanks/run",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "POST",
|
||||
"route": "/api/action/games/akinator/choose_thematic",
|
||||
"params": ["thematic"],
|
||||
"entitiesType": "trim"
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/games/akinator/setup",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/games/akinator/guess",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/games/akinator/retry",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/games/guess_the_number/setup",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/games/guess_the_number/guess",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/games/guess_the_number/replay",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/games/rochambeau/start",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "POST",
|
||||
"route": "/api/action/games/rochambeau/play",
|
||||
"params": ["handsign"],
|
||||
"entitiesType": "trim"
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/games/rochambeau/rematch",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/unknown/widget-playground/run",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/social_communication/conversation/setup",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/social_communication/conversation/chit_chat",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/social_communication/conversation/converse",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/social_communication/mbti/setup",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/social_communication/mbti/quiz",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/utilities/date_time/current_date_time",
|
||||
@ -305,6 +280,31 @@
|
||||
"method": "GET",
|
||||
"route": "/api/action/utilities/translator-poc/translate",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/social_communication/conversation/setup",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/social_communication/conversation/chit_chat",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/social_communication/conversation/converse",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/social_communication/mbti/setup",
|
||||
"params": []
|
||||
},
|
||||
{
|
||||
"method": "GET",
|
||||
"route": "/api/action/social_communication/mbti/quiz",
|
||||
"params": []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -180,17 +180,20 @@ export default class SocketServer {
|
||||
})
|
||||
|
||||
// Listen for widget events
|
||||
this.socket?.on('widget-event', (event: WidgetDataEvent) => {
|
||||
this.socket?.on('widget-event', async (event: WidgetDataEvent) => {
|
||||
LogHelper.title('Socket')
|
||||
LogHelper.info(`Widget event: ${JSON.stringify(event)}`)
|
||||
|
||||
const { method } = event
|
||||
|
||||
if (method.methodName === 'send_utterance') {
|
||||
this.socket?.emit(
|
||||
'widget-send-utterance',
|
||||
method.methodParams['utterance']
|
||||
)
|
||||
const utterance = method.methodParams['utterance']
|
||||
|
||||
if (method.methodParams['from'] === 'leon') {
|
||||
await BRAIN.talk(utterance as string, true)
|
||||
} else {
|
||||
this.socket?.emit('widget-send-utterance', utterance)
|
||||
}
|
||||
} else if (method.methodName === 'run_skill_action') {
|
||||
this.socket?.emit('widget-run-skill-action', method.methodParams)
|
||||
}
|
||||
|
@ -286,7 +286,12 @@ export const skillConfigSchemaObject = Type.Strict(
|
||||
)
|
||||
),
|
||||
answers: Type.Optional(Type.Record(Type.String(), Type.Array(answerTypes))),
|
||||
widget_contents: Type.Optional(Type.Record(Type.String(), Type.String())),
|
||||
widget_contents: Type.Optional(
|
||||
Type.Record(
|
||||
Type.String(),
|
||||
Type.Union([Type.String(), Type.Array(Type.String())])
|
||||
)
|
||||
),
|
||||
entities: Type.Optional(Type.Record(Type.String(), Type.String())),
|
||||
resolvers: Type.Optional(
|
||||
Type.Record(
|
||||
|
@ -29,7 +29,9 @@ export class PlaygroundTestWidget extends Widget<Params> {
|
||||
children: provider,
|
||||
onClick: (): WidgetEventMethod => {
|
||||
return this.sendUtterance('choose_provider', {
|
||||
provider
|
||||
data: {
|
||||
provider
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
@ -59,5 +59,13 @@
|
||||
"Sorry, I can't set a timer for this unit. Use %hours%, %minutes% or %seconds% instead.",
|
||||
"I can't set a timer for this duration. Use %hours%, %minutes% or %seconds% instead."
|
||||
]
|
||||
},
|
||||
"widget_contents": {
|
||||
"second_unit": "second",
|
||||
"seconds_unit": "seconds",
|
||||
"minutes_unit": "minutes",
|
||||
"minute_unit": "minute",
|
||||
"total_time": "Total %value% %unit%",
|
||||
"times_up": ["Time's up!", "The timer is up!", "The timer has ended!"]
|
||||
}
|
||||
}
|
||||
|
@ -3,10 +3,6 @@ import { leon } from '@sdk/leon'
|
||||
|
||||
import { TimerWidget } from '../widgets/timer'
|
||||
|
||||
function secondsToMinutes(seconds: number): number {
|
||||
return seconds / 60
|
||||
}
|
||||
|
||||
export const run: ActionFunction = async function (params) {
|
||||
const supportedUnits = ['hours', 'minutes', 'seconds']
|
||||
const durations = (
|
||||
@ -24,12 +20,17 @@ export const run: ActionFunction = async function (params) {
|
||||
}
|
||||
|
||||
const { value: durationValue } = duration
|
||||
|
||||
const seconds = Number(durationValue)
|
||||
const timerWidget = new TimerWidget({
|
||||
params: {
|
||||
minutes: secondsToMinutes(Number(durationValue))
|
||||
seconds
|
||||
}
|
||||
})
|
||||
|
||||
// TODO: return a speech without new utterance
|
||||
/*await leon.answer({
|
||||
widget: timerWidget,
|
||||
speech: 'I set a timer for ... ...'
|
||||
})*/
|
||||
await leon.answer({ widget: timerWidget })
|
||||
}
|
||||
|
14
skills/utilities/timer/src/widgets/components/timer.ts
Normal file
14
skills/utilities/timer/src/widgets/components/timer.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { WidgetComponent } from '@sdk/widget-component'
|
||||
|
||||
interface TimerProps {
|
||||
initialTime: number
|
||||
interval: number
|
||||
totalTimeContent: string
|
||||
onEnd?: () => void
|
||||
}
|
||||
|
||||
export class Timer extends WidgetComponent<TimerProps> {
|
||||
constructor(props: TimerProps) {
|
||||
super(props)
|
||||
}
|
||||
}
|
@ -1,9 +1,10 @@
|
||||
import { Widget, type WidgetOptions } from '@sdk/widget'
|
||||
import { Widget, type WidgetEventMethod, type WidgetOptions } from '@sdk/widget'
|
||||
import { type WidgetComponent } from '@sdk/widget-component'
|
||||
import { Flexbox, CircularProgress, Text } from '@sdk/aurora'
|
||||
|
||||
import { Timer } from './components/timer'
|
||||
|
||||
interface Params {
|
||||
minutes: number
|
||||
seconds: number
|
||||
}
|
||||
|
||||
export class TimerWidget extends Widget<Params> {
|
||||
@ -15,30 +16,41 @@ export class TimerWidget extends Widget<Params> {
|
||||
* TODO
|
||||
* 1. Save timer + timer id in memory
|
||||
* 2. On rendering, set widget id to timer id
|
||||
* 3. When load feed, need to fetch all timers as per their timer id. Need a built-in API here
|
||||
* 3. When load feed, need to fetch all timers (onFetch?) as per their timer id. Need a built-in API here
|
||||
* 4. onEnd (or onChange and check if done?), then trigger next action or utterance
|
||||
*/
|
||||
|
||||
public render(): WidgetComponent {
|
||||
return new CircularProgress({
|
||||
value: 0,
|
||||
size: 'lg',
|
||||
children: new Flexbox({
|
||||
gap: 'xs',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
children: [
|
||||
new Text({
|
||||
fontSize: 'lg',
|
||||
fontWeight: 'semi-bold',
|
||||
children: 0
|
||||
}),
|
||||
new Text({
|
||||
fontSize: 'xs',
|
||||
secondary: true,
|
||||
children: 'Total 10 minutes'
|
||||
})
|
||||
]
|
||||
const { seconds } = this.params
|
||||
const secondUnitContent = this.content('second_unit')
|
||||
const secondsUnitContent = this.content('seconds_unit')
|
||||
const minuteUnitContent = this.content('minute_unit')
|
||||
const minutesUnitContent = this.content('minutes_unit')
|
||||
let totalTimeContent = ''
|
||||
|
||||
if (seconds >= 60) {
|
||||
const minutes = seconds / 60
|
||||
|
||||
totalTimeContent = this.content('total_time', {
|
||||
value: minutes % 1 === 0 ? minutes : minutes.toFixed(2),
|
||||
unit: minutes > 1 ? minutesUnitContent : minuteUnitContent
|
||||
})
|
||||
} else {
|
||||
totalTimeContent = this.content('total_time', {
|
||||
value: seconds,
|
||||
unit: seconds > 1 ? secondsUnitContent : secondUnitContent
|
||||
})
|
||||
}
|
||||
|
||||
return new Timer({
|
||||
initialTime: seconds,
|
||||
interval: 1_000,
|
||||
totalTimeContent,
|
||||
onEnd: (): WidgetEventMethod => {
|
||||
return this.sendUtterance('times_up', {
|
||||
from: 'leon'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
@ -6,6 +6,7 @@
|
||||
"baseUrl": ".",
|
||||
"moduleResolution": "Node",
|
||||
"module": "CommonJS",
|
||||
"jsx": "react",
|
||||
"paths": {
|
||||
"@@/*": ["./*"],
|
||||
"@/*": ["./server/src/*"],
|
||||
|
Loading…
Reference in New Issue
Block a user