@@ -84,84 +84,88 @@ const PromptsTab = ({
84
84
} ;
85
85
86
86
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
+ />
106
109
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
+ />
140
143
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 >
165
169
</ div >
166
170
</ div >
167
171
</ TabsContent >
0 commit comments