@@ -25,36 +25,58 @@ const capitalize = (s:string) => {
25
25
return s . charAt ( 0 ) . toUpperCase ( ) + s . slice ( 1 ) . toLocaleLowerCase ( )
26
26
}
27
27
28
+ async function query ( data : { question : string } ) {
29
+ const response = await fetch (
30
+ "/api/search" ,
31
+ {
32
+ method : "POST" ,
33
+ body : JSON . stringify ( data )
34
+ }
35
+ ) ;
36
+ const responsetext = await response . json ( )
37
+ console . log ( responsetext )
38
+ return responsetext . text
39
+ }
40
+
41
+
28
42
29
43
const SearchBarModal = ( { isOpen, setIsOpen} :Props ) => {
30
44
const [ search , setSearch ] = useState ( '' )
31
45
const [ resources , setResources ] = useState < Resource [ ] > ( [ ] )
32
46
const [ loading , setLoading ] = useState ( false )
47
+ const [ answer , setAnswer ] = useState ( '' )
33
48
function closeModal ( ) {
34
49
setIsOpen ( false )
35
50
setSearch ( '' )
51
+ setAnswer ( '' )
36
52
setResources ( [ ] )
37
53
}
38
54
39
55
function openModal ( ) {
40
56
setIsOpen ( true )
41
57
}
42
58
59
+ useEffect ( ( ) => {
60
+ if ( ! search ) {
61
+ setAnswer ( '' )
62
+ setResources ( [ ] )
63
+ }
64
+ } , [ search ] )
65
+
43
66
const handleSubmit = async ( e :React . FormEvent < HTMLFormElement > ) => {
44
67
e . preventDefault ( )
68
+ if ( ! search ) return
69
+
45
70
try {
46
71
setLoading ( true )
47
- const { data} = await axiosInstance . post ( '/websites/search' , {
48
- desc : search
49
- } )
50
- const { resources} : {
51
- resources :Resource [ ]
52
- } = data
53
- setResources ( resources )
72
+ const res = await query ( { "question" : `question: ${ search } , make sure to always give resources in a list format with all the detail like NAME DESC and URL, if no resource is available just say 'No resource found', also go through all the resources in the context properly if the resource might be usefull include that also, don't hesitate just give as many resources as possible for the provided question` } )
73
+ setAnswer ( res )
54
74
} catch ( err :any ) {
55
75
toast . error ( err . message || 'Something went wrong' )
56
76
}
57
- setLoading ( false )
77
+ finally {
78
+ setLoading ( false )
79
+ }
58
80
}
59
81
60
82
@@ -124,23 +146,23 @@ const SearchBarModal = ({isOpen, setIsOpen}:Props) => {
124
146
</ div >
125
147
}
126
148
{
127
- loading && resources . length < 1 && isDesktop && < div className = "w-full flex flex-col items-center" >
149
+ loading && isDesktop && < div className = "w-full flex flex-col items-center" >
128
150
< div className = 'w-[40vw] flex items-center justify-between h-[4rem] border-white rounded-b-[10px] border p-[1rem] bg-[#0d0d0e]' >
129
- < div className = 'flex w-[50%] h-full items-center' >
151
+ < div className = 'flex w-[50%] h-full items-center' >
130
152
< p className = 'text-white truncate text-sm' > Searching...</ p >
131
- </ div >
153
+ </ div >
132
154
< div className = 'flex gap-[0.5rem] items-center' >
133
155
< ImSpinner8 className = 'text-white animate-spin h-[1.5rem] w-[1.5rem]' />
134
156
</ div >
135
157
</ div >
136
158
</ div >
137
159
}
138
160
{
139
- ! loading && resources . length < 1 && isDesktop && < div className = "w-full flex flex-col items-center" >
161
+ ! loading && ! answer && isDesktop && < div className = "w-full flex flex-col items-center" >
140
162
< div className = 'w-[40vw] flex items-center justify-between h-[4rem] border-white rounded-b-[10px] border p-[1rem] bg-[#0d0d0e]' >
141
- < div className = 'flex w-[50%] h-full items-center' >
163
+ < div className = 'flex w-[50%] h-full items-center' >
142
164
< p className = 'text-white truncate text-sm' > Type something and Press Enter to Search...</ p >
143
- </ div >
165
+ </ div >
144
166
< div className = 'flex gap-[0.5rem] items-center' >
145
167
< MdKeyboardReturn className = 'text-white h-[1.5rem] w-[1.5rem]' />
146
168
</ div >
@@ -152,31 +174,20 @@ const SearchBarModal = ({isOpen, setIsOpen}:Props) => {
152
174
{ isDesktop && < div className = 'w-full flex flex-col items-center' >
153
175
< div className = 'border no-scrollbar border-white max-h-[60vh] overflow-y-auto overflow-x-hidden rounded-b-[10px]' >
154
176
{
155
- resources . length >= 1 && ! loading && search && resources . map ( ( res ) => {
156
- return (
157
- < div className = 'w-[40vw] flex items-center justify-between h-[4rem] border-b-white/50 border p-[0.5rem] bg-[#0d0d0e]' >
158
- < div className = 'flex w-[50%] items-center' >
159
- < Image src = { res . image_url } alt = { res . title } width = { 64 } height = { 64 } className = ' h-[3rem] w-[3rem] object-cover' />
160
- < div className = 'ml-[1rem] w-full' >
161
- < p title = {
162
- `${ res . title } \n${ res . desc } `
163
- } className = 'text-white truncate text-sm' > { res . title } </ p >
164
- </ div >
165
- </ div >
166
- < div className = 'flex gap-[0.5rem] items-center' >
167
- < a href = { res . url } target = '_blank' rel = 'noreferrer' >
168
- < HiExternalLink className = 'text-white h-[1.5rem] w-[1.5rem]' />
169
- </ a >
170
- </ div >
171
- </ div >
172
- )
173
- } )
177
+ answer && ! loading && search && < div className = 'w-full flex flex-col items-center' >
178
+ < div className = 'w-[40vw] overflow-x-auto no-scrollbar flex items-center justify-between border-white rounded-b-[10px] border p-[1rem] bg-[#0d0d0e]' >
179
+
180
+ < pre className = 'text-white text-sm' > { answer } </ pre >
181
+
182
+
183
+ </ div >
184
+ </ div >
174
185
}
175
186
176
187
</ div >
177
188
</ div > }
178
189
179
- { ! isDesktop && < div className = 'mt-[3rem] w-full' >
190
+ { ! isDesktop && < div className = 'mt-[3rem] w-full' >
180
191
{ resources . length >= 1 && ! loading && < Reorder . Group values = { resources } axis = { 'x' } onReorder = { ( ) => { } } className = 'z-[1] md:ml-[3rem] flex gap-[1rem] flex-wrap mt-[2rem]' >
181
192
{ resources . map ( ( e ) => {
182
193
return (
0 commit comments