@@ -33,25 +33,27 @@ export class UaiCopilotInputElement extends UmbLitElement {
3333 #copilotContext?: UaiCopilotContext ;
3434 #textareaRef = createRef < HTMLElement > ( ) ;
3535
36- get #isDisabled( ) : boolean {
37- return this . disabled || this . _agents . length === 0 ;
38- }
39-
40- constructor ( ) {
41- super ( ) ;
42- this . consumeContext ( UAI_COPILOT_CONTEXT , ( context ) => {
43- if ( context ) {
44- this . #copilotContext = context ;
45- this . observe ( context . agents , ( agents ) => ( this . _agents = agents ) ) ;
46- this . observe ( context . selectedAgent , ( agent ) => ( this . _selectedAgentId = agent ?. id ?? "" ) ) ;
47- this . observe ( context . agentsLoading , ( loading ) => ( this . _agentsLoading = loading ) ) ;
48- this . observe ( context . isOpen , ( isOpen ) => {
49- if ( isOpen ) {
50- // Focus input when sidebar opens (after transition completes)
51- setTimeout ( ( ) => {
52- this . #textareaRef. value ?. focus ( ) ;
53- } , 350 ) ; // Slightly longer than the 0.3s CSS transition
54- }
36+ get #isDisabled( ) : boolean {
37+ return this . disabled || this . _agents . length === 0 ;
38+ }
39+
40+ constructor ( ) {
41+ super ( ) ;
42+ this . consumeContext ( UAI_COPILOT_CONTEXT , ( context ) => {
43+ if ( context ) {
44+ this . #copilotContext = context ;
45+ this . observe ( context . agents , ( agents ) => ( this . _agents = agents ) ) ;
46+ this . observe ( context . selectedAgent , ( agent ) => ( this . _selectedAgentId = agent ?. id ?? "" ) ) ;
47+ this . observe ( context . agentsLoading , ( loading ) => ( this . _agentsLoading = loading ) ) ;
48+ this . observe ( context . isOpen , ( isOpen ) => {
49+ if ( isOpen ) {
50+ // Focus input when sidebar opens (after transition completes)
51+ setTimeout ( ( ) => {
52+ this . #textareaRef. value ?. focus ( ) ;
53+ } , 350 ) ; // Slightly longer than the 0.3s CSS transition
54+ }
55+ } ) ;
56+ }
5557 } ) ;
5658 }
5759
@@ -90,115 +92,127 @@ export class UaiCopilotInputElement extends UmbLitElement {
9092 this . _value = ( e . target as HTMLTextAreaElement ) . value ;
9193 }
9294
93- override render ( ) {
94- const hasNoAgents = this . _agents . length === 0 && ! this . _agentsLoading ;
95-
96- return html `
97- <div class= "input-wrapper" >
98- <div class= "input-box" >
99- <uui- textarea
100- ${ ref ( this . #textareaRef) }
101- .value = ${ this . _value }
102- placeholder= ${ hasNoAgents
103- ? "Create a copilot agent to start chatting"
104- : this . placeholder }
105- ?dis abled= ${ this . #isDisabled}
106- auto - height
107- @input = ${ this . #handleInput}
108- @keydown = ${ this . #handleKeydown}
109- > </ uui- textarea>
110- <hr class= "divider" / >
111- <div class= "actions-row" >
112- <div class= "left-actions" >
113- ${ this . _agentsLoading
114- ? html `<span class= "agent-loading" > Loading ...</ span> `
115- : hasNoAgents
116- ? html `<span class= "no-agents-message" > No agents configured </ span> `
117- : html `
118- <uui- select
119- class= "agent-select"
120- .value = ${ this . _selectedAgentId }
121- .options = ${ this . #getAgentOptions( ) }
122- @change = ${ this . #handleAgentChange}
123- > </ uui- select>
124- ` }
95+ #send( ) {
96+ if ( ! this . _value . trim ( ) || this . disabled ) return ;
97+
98+ this . dispatchEvent (
99+ new CustomEvent ( "send" , {
100+ detail : this . _value ,
101+ bubbles : true ,
102+ composed : true ,
103+ } ) ,
104+ ) ;
105+
106+ this . _value = "" ;
107+ }
108+
109+ override render ( ) {
110+ const hasNoAgents = this . _agents . length === 0 && ! this . _agentsLoading ;
111+
112+ return html `
113+ <div class= "input-wrapper" >
114+ <div class= "input-box" >
115+ <uui- textarea
116+ ${ ref ( this . #textareaRef) }
117+ .value = ${ this . _value }
118+ placeholder= ${ hasNoAgents ? "Create a copilot agent to start chatting" : this . placeholder }
119+ ?dis abled= ${ this . #isDisabled}
120+ auto - height
121+ @input = ${ this . #handleInput}
122+ @keydown = ${ this . #handleKeydown}
123+ > </ uui- textarea>
124+ <hr class= "divider" / >
125+ <div class= "actions-row" >
126+ <div class= "left-actions" >
127+ ${ this . _agentsLoading
128+ ? html `<span class= "agent-loading" > Loading ...</ span> `
129+ : hasNoAgents
130+ ? html `<span class= "no-agents-message" > No agents configured </ span> `
131+ : html `
132+ <uui- select
133+ class= "agent-select"
134+ .value = ${ this . _selectedAgentId }
135+ .options = ${ this . #getAgentOptions( ) }
136+ @change = ${ this . #handleAgentChange}
137+ > </ uui- select>
138+ ` }
139+ </ div>
140+ <uui- butto n
141+ look= "primary"
142+ compact
143+ ?dis abled= ${ this . #isDisabled || ! this . _value . trim ( ) }
144+ @click = ${ this . #send}
145+ >
146+ <uui- icon name= "icon-navigation-right" > </ uui- icon>
147+ </ uui- butto n>
148+ </ div>
149+ </ div>
125150 </ div>
126- <uui- butto n
127- look= "primary"
128- compact
129- ?dis abled= ${ this . #isDisabled || ! this . _value . trim ( ) }
130- @click = ${ this . #send}
131- >
132- <uui- icon name= "icon-navigation-right" > </ uui- icon>
133- </ uui- butto n>
134- </ div>
135- </ div>
136- </ div>
137- ` ;
138- }
139-
140- static override styles = css `
141- : host {
142- display : block;
151+ ` ;
143152 }
144153
145- .input-wrapper {
146- padding : var (--uui-size-space-4 );
147- }
154+ static override styles = css `
155+ : host {
156+ display : block;
157+ }
148158
149- .input-box {
150- display : flex;
151- flex-direction : column;
152- gap : var (--uui-size-space-2 );
153- padding : var (--uui-size-space-3 );
154- background : var (--uui-color-surface );
155- border : 1px solid var (--uui-color-border );
156- border-radius : var (--uui-border-radius );
157- }
159+ .input-wrapper {
160+ padding : var (--uui-size-space-4 );
161+ }
158162
159- uui-textarea {
160- --uui-textarea-min-height : 24px ;
161- --uui-textarea-max-height : 200px ;
162- --uui-textarea-background-color : transparent;
163- --uui-textarea-border-color : transparent;
164- }
163+ .input-box {
164+ display : flex;
165+ flex-direction : column;
166+ gap : var (--uui-size-space-2 );
167+ padding : var (--uui-size-space-3 );
168+ background : var (--uui-color-surface );
169+ border : 1px solid var (--uui-color-border );
170+ border-radius : var (--uui-border-radius );
171+ }
165172
166- uui-textarea : focus-within {
167- --uui-textarea-border-color : transparent;
168- }
173+ uui-textarea {
174+ --uui-textarea-min-height : 24px ;
175+ --uui-textarea-max-height : 200px ;
176+ --uui-textarea-background-color : transparent;
177+ --uui-textarea-border-color : transparent;
178+ }
169179
170- .divider {
171- border : none;
172- border-top : 1px solid var (--uui-color-border );
173- margin : 0 ;
174- }
180+ uui-textarea : focus-within {
181+ --uui-textarea-border-color : transparent;
182+ }
175183
176- . actions-row {
177- display : flex ;
178- justify-content : space-between ;
179- align-items : center ;
180- }
184+ . divider {
185+ border : none ;
186+ border-top : 1 px solid var ( --uui-color-border ) ;
187+ margin : 0 ;
188+ }
181189
182- .left-actions {
183- display : flex;
184- gap : var (--uui-size-space-2 );
185- }
190+ .actions-row {
191+ display : flex;
192+ justify-content : space-between;
193+ align-items : center;
194+ }
186195
187- . agent-select {
188- min-width : 120 px ;
189- max-width : 180 px ;
190- }
196+ . left-actions {
197+ display : flex ;
198+ gap : var ( --uui-size-space-2 ) ;
199+ }
191200
192- .agent-loading {
193- font-size : var ( --uui-type-small-size ) ;
194- color : var ( --uui-color-text-alt ) ;
195- }
201+ .agent-select {
202+ min-width : 120 px ;
203+ max-width : 180 px ;
204+ }
196205
197- .no-agents-message {
198- font-size : var (--uui-type-small-size );
199- color : var (--uui-color-danger );
200- }
201- ` ;
206+ .agent-loading {
207+ font-size : var (--uui-type-small-size );
208+ color : var (--uui-color-text-alt );
209+ }
210+
211+ .no-agents-message {
212+ font-size : var (--uui-type-small-size );
213+ color : var (--uui-color-danger );
214+ }
215+ ` ;
202216}
203217
204218export default UaiCopilotInputElement ;
0 commit comments