2
2
3
3
import { useCopilotContext } from "@copilotkit/react-core" ;
4
4
import { CopilotTask } from "@copilotkit/react-core" ;
5
- import {
6
- CopilotKit ,
7
- useMakeCopilotActionable ,
8
- useMakeCopilotReadable ,
9
- } from "@copilotkit/react-core" ;
5
+ import { CopilotKit , useMakeCopilotReadable } from "@copilotkit/react-core" ;
10
6
import { CopilotSidebar } from "@copilotkit/react-ui" ;
11
7
import { useEffect , useState } from "react" ;
12
8
import Markdown from "react-markdown" ;
13
9
import "./styles.css" ;
10
+ import { useCopilotAction } from "@copilotkit/react-core" ;
14
11
15
12
let globalAudio : any = undefined ;
16
13
let globalAudioEnabled = false ;
17
14
15
+ function enableGlobalAudio ( ) {
16
+ if ( ! globalAudioEnabled ) {
17
+ globalAudio . play ( ) ;
18
+ globalAudio . pause ( ) ;
19
+ }
20
+ globalAudioEnabled = true ;
21
+ }
22
+
18
23
const Demo = ( ) => {
19
24
return (
20
25
< CopilotKit url = "/api/copilotkit/openai" >
@@ -26,11 +31,7 @@ const Demo = () => {
26
31
} }
27
32
clickOutsideToClose = { false }
28
33
onSubmitMessage = { async ( message ) => {
29
- if ( ! globalAudioEnabled ) {
30
- globalAudio . play ( ) ;
31
- globalAudio . pause ( ) ;
32
- }
33
- globalAudioEnabled = true ;
34
+ enableGlobalAudio ( ) ;
34
35
} }
35
36
>
36
37
< Presentation />
@@ -53,55 +54,48 @@ const Presentation = () => {
53
54
54
55
useMakeCopilotReadable ( "This is the current slide: " + JSON . stringify ( state ) ) ;
55
56
56
- useMakeCopilotActionable (
57
- {
58
- name : "presentSlide" ,
59
- description :
60
- "Present a slide in the presentation you are giving. Call this function multiple times to present multiple slides." ,
61
- argumentAnnotations : [
62
- {
63
- name : "markdown" ,
64
- type : "string" ,
65
- description :
66
- "The text to display in the presentation slide. Use simple markdown to outline your speech, like a headline, lists, paragraphs, etc." ,
67
- required : true ,
68
- } ,
69
- {
70
- name : "backgroundImage" ,
71
- type : "string" ,
72
- description : "What to display in the background of the slide (i.e. 'dog' or 'house')." ,
73
- required : true ,
74
- } ,
75
- {
76
- name : "speech" ,
77
- type : "string" ,
78
- description : "An informative speech about the current slide." ,
79
- required : true ,
80
- } ,
81
- ] ,
82
-
83
- implementation : async ( markdown , backgroundImage , speech ) => {
84
- setState ( {
85
- markdown,
86
- backgroundImage,
87
- } ) ;
88
-
89
- console . log ( "Presenting slide: " , markdown , backgroundImage , speech ) ;
90
-
91
- const encodedText = encodeURIComponent ( speech ) ;
92
- const url = `/api/tts?text=${ encodedText } ` ;
93
- globalAudio . src = url ;
94
- await globalAudio . play ( ) ;
95
- await new Promise < void > ( ( resolve ) => {
96
- globalAudio . onended = function ( ) {
97
- resolve ( ) ;
98
- } ;
99
- } ) ;
100
- await new Promise ( ( resolve ) => setTimeout ( resolve , 500 ) ) ;
57
+ useCopilotAction ( {
58
+ name : "presentSlide" ,
59
+ description :
60
+ "Present a slide in the presentation you are giving. Call this function multiple times to present multiple slides." ,
61
+ parameters : [
62
+ {
63
+ name : "markdown" ,
64
+ type : "string" ,
65
+ description :
66
+ "The text to display in the presentation slide. Use simple markdown to outline your speech, like a headline, lists, paragraphs, etc." ,
67
+ } ,
68
+ {
69
+ name : "backgroundImage" ,
70
+ type : "string" ,
71
+ description : "What to display in the background of the slide (i.e. 'dog' or 'house')." ,
72
+ } ,
73
+ {
74
+ name : "speech" ,
75
+ type : "string" ,
76
+ description : "An informative speech about the current slide." ,
101
77
} ,
78
+ ] ,
79
+ handler : async ( { markdown, speech, backgroundImage } ) => {
80
+ setState ( {
81
+ markdown,
82
+ backgroundImage,
83
+ } ) ;
84
+
85
+ console . log ( "Presenting slide: " , markdown , backgroundImage , speech ) ;
86
+
87
+ const encodedText = encodeURIComponent ( speech ) ;
88
+ const url = `/api/tts?text=${ encodedText } ` ;
89
+ globalAudio . src = url ;
90
+ await globalAudio . play ( ) ;
91
+ await new Promise < void > ( ( resolve ) => {
92
+ globalAudio . onended = function ( ) {
93
+ resolve ( ) ;
94
+ } ;
95
+ } ) ;
96
+ await new Promise ( ( resolve ) => setTimeout ( resolve , 500 ) ) ;
102
97
} ,
103
- [ ] ,
104
- ) ;
98
+ } ) ;
105
99
106
100
const randomSlideTask = new CopilotTask ( {
107
101
instructions : "Make a random slide related to the current topic" ,
@@ -119,6 +113,7 @@ const Presentation = () => {
119
113
className = { `absolute bottom-0 left-0 mb-4 ml-4 bg-blue-500 text-white font-bold py-2 px-4 rounded
120
114
${ randomSlideTaskRunning ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700" } ` }
121
115
onClick = { async ( ) => {
116
+ enableGlobalAudio ( ) ;
122
117
try {
123
118
setRandomSlideTaskRunning ( true ) ;
124
119
await randomSlideTask . run ( context ) ;
0 commit comments