@@ -84,84 +84,88 @@ const PromptsTab = ({
8484 } ;
8585
8686 return (
87- < TabsContent value = "prompts" className = "grid grid-cols-2 gap-4" >
88- < ListPane
89- items = { prompts }
90- listItems = { listPrompts }
91- clearItems = { clearPrompts }
92- setSelectedItem = { ( prompt ) => {
93- setSelectedPrompt ( prompt ) ;
94- setPromptArgs ( { } ) ;
95- } }
96- renderItem = { ( prompt ) => (
97- < >
98- < span className = "flex-1" > { prompt . name } </ span >
99- < span className = "text-sm text-gray-500" > { prompt . description } </ span >
100- </ >
101- ) }
102- title = "Prompts"
103- buttonText = { nextCursor ? "List More Prompts" : "List Prompts" }
104- isButtonDisabled = { ! nextCursor && prompts . length > 0 }
105- />
87+ < TabsContent value = "prompts" >
88+ < div className = "grid grid-cols-2 gap-4" >
89+ < ListPane
90+ items = { prompts }
91+ listItems = { listPrompts }
92+ clearItems = { clearPrompts }
93+ setSelectedItem = { ( prompt ) => {
94+ setSelectedPrompt ( prompt ) ;
95+ setPromptArgs ( { } ) ;
96+ } }
97+ renderItem = { ( prompt ) => (
98+ < >
99+ < span className = "flex-1" > { prompt . name } </ span >
100+ < span className = "text-sm text-gray-500" >
101+ { prompt . description }
102+ </ span >
103+ </ >
104+ ) }
105+ title = "Prompts"
106+ buttonText = { nextCursor ? "List More Prompts" : "List Prompts" }
107+ isButtonDisabled = { ! nextCursor && prompts . length > 0 }
108+ />
106109
107- < div className = "bg-card rounded-lg shadow" >
108- < div className = "p-4 border-b border-gray-200" >
109- < h3 className = "font-semibold" >
110- { selectedPrompt ? selectedPrompt . name : "Select a prompt" }
111- </ h3 >
112- </ div >
113- < div className = "p-4" >
114- { error ? (
115- < Alert variant = "destructive" >
116- < AlertCircle className = "h-4 w-4" />
117- < AlertTitle > Error</ AlertTitle >
118- < AlertDescription > { error } </ AlertDescription >
119- </ Alert >
120- ) : selectedPrompt ? (
121- < div className = "space-y-4" >
122- { selectedPrompt . description && (
123- < p className = "text-sm text-gray-600" >
124- { selectedPrompt . description }
125- </ p >
126- ) }
127- { selectedPrompt . arguments ?. map ( ( arg ) => (
128- < div key = { arg . name } >
129- < Label htmlFor = { arg . name } > { arg . name } </ Label >
130- < Combobox
131- id = { arg . name }
132- placeholder = { `Enter ${ arg . name } ` }
133- value = { promptArgs [ arg . name ] || "" }
134- onChange = { ( value ) => handleInputChange ( arg . name , value ) }
135- onInputChange = { ( value ) =>
136- handleInputChange ( arg . name , value )
137- }
138- options = { completions [ arg . name ] || [ ] }
139- />
110+ < div className = "bg-card rounded-lg shadow" >
111+ < div className = "p-4 border-b border-gray-200" >
112+ < h3 className = "font-semibold" >
113+ { selectedPrompt ? selectedPrompt . name : "Select a prompt" }
114+ </ h3 >
115+ </ div >
116+ < div className = "p-4" >
117+ { error ? (
118+ < Alert variant = "destructive" >
119+ < AlertCircle className = "h-4 w-4" />
120+ < AlertTitle > Error</ AlertTitle >
121+ < AlertDescription > { error } </ AlertDescription >
122+ </ Alert >
123+ ) : selectedPrompt ? (
124+ < div className = "space-y-4" >
125+ { selectedPrompt . description && (
126+ < p className = "text-sm text-gray-600" >
127+ { selectedPrompt . description }
128+ </ p >
129+ ) }
130+ { selectedPrompt . arguments ?. map ( ( arg ) => (
131+ < div key = { arg . name } >
132+ < Label htmlFor = { arg . name } > { arg . name } </ Label >
133+ < Combobox
134+ id = { arg . name }
135+ placeholder = { `Enter ${ arg . name } ` }
136+ value = { promptArgs [ arg . name ] || "" }
137+ onChange = { ( value ) => handleInputChange ( arg . name , value ) }
138+ onInputChange = { ( value ) =>
139+ handleInputChange ( arg . name , value )
140+ }
141+ options = { completions [ arg . name ] || [ ] }
142+ />
140143
141- { arg . description && (
142- < p className = "text-xs text-gray-500 mt-1" >
143- { arg . description }
144- { arg . required && (
145- < span className = "text-xs mt-1 ml-1" > (Required)</ span >
146- ) }
147- </ p >
148- ) }
149- </ div >
150- ) ) }
151- < Button onClick = { handleGetPrompt } className = "w-full" >
152- Get Prompt
153- </ Button >
154- { promptContent && (
155- < JsonView data = { promptContent } withCopyButton = { false } />
156- ) }
157- </ div >
158- ) : (
159- < Alert >
160- < AlertDescription >
161- Select a prompt from the list to view and use it
162- </ AlertDescription >
163- </ Alert >
164- ) }
144+ { arg . description && (
145+ < p className = "text-xs text-gray-500 mt-1" >
146+ { arg . description }
147+ { arg . required && (
148+ < span className = "text-xs mt-1 ml-1" > (Required)</ span >
149+ ) }
150+ </ p >
151+ ) }
152+ </ div >
153+ ) ) }
154+ < Button onClick = { handleGetPrompt } className = "w-full" >
155+ Get Prompt
156+ </ Button >
157+ { promptContent && (
158+ < JsonView data = { promptContent } withCopyButton = { false } />
159+ ) }
160+ </ div >
161+ ) : (
162+ < Alert >
163+ < AlertDescription >
164+ Select a prompt from the list to view and use it
165+ </ AlertDescription >
166+ </ Alert >
167+ ) }
168+ </ div >
165169 </ div >
166170 </ div >
167171 </ TabsContent >
0 commit comments