Lo interesante es que además vais a ver el Use Client.
Vamos a crear aquí en App Components, por ejemplo,
y vamos a tener aquí form.js.
Vamos a poner chat directamente,
tampoco nos vamos a dedicar aquí a crear muchos componentes,
que si no nos volvemos locos.
Vamos a hacer que esto sea Use Client
y vamos a importar el Use Chat Options.
Import Use Chat.
No sé por qué no sale, pero se supone que esto existe.
Use Chat.
Esto es un custom hook de esta biblioteca
Inteligencia Artificial barra React de Vercel,
que es la que va a hacer una de magia por nosotros
para poder recuperar esa información
y directamente mostrarla sin mucho lío.
Ahora tenemos que decirle que tenemos que utilizar al cliente
porque vamos a tener eventos en este componente.
Como estábamos utilizando los React Server Components,
sí, los populares React Server Components.
Si nosotros no ponemos esto y creamos,
o sea, export, default, function, chat, ¿vale?
Y ponemos aquí, bueno, vamos a quitarle el default,
lo haremos nombrado, ¿vale?
Y ponemos aquí un return, div, class name, bla, bla, bla.
Y aquí, pues, en lugar de chat, vamos a tener aquí,
bueno, tenemos que poner los mensajes.
Ahora lo pondremos.
Vamos a poner primero el formulario,
donde vamos a hablar con nuestra abuelita.
Vamos a poner aquí label,
escribe a la abuelita,
escribe a la abuelita para escuchar su consejo.
Y aquí vamos a tener el input,
que le vamos a decir content, vamos a ponerle, ¿eh?
Tipo text, name content,
y cuando hagamos el change, vamos a hacer algo aquí.
Normalmente, para hacer el change,
tendríamos que tener un estado con el text,
que no sé qué.
Esto no lo vamos a necesitar,
porque esto automáticamente lo va a hacer el useChat.
Lo va a hacer por nosotros.
¿Qué es lo que tenemos que hacer con el useChat?
Utilizando el custom hook de useChat,
vamos a tener de plano un montón de cosas.
Tenemos aquí la documentación.
Tenemos la forma de recuperar los mensajes,
lo que hemos escrito,
el onChange, el submit del formulario.
Todo esto ya nos da,
pero fijaos que hay un montón.
Mira, por defecto va a barra API, barra chat.
O sea que vamos a cambiar.
¿Ves? API.
¿Ves que aquí había puesto yo completion?
Vamos a poner barra chat.
Pero lo interesante es que esto es customizable, ¿eh?
Le podemos pasar la API, a la que tiene que tirar,
la ID, un identificador único del chat.
Si no se provee, se le da uno random.
El input inicial, los mensajes iniciales.
Aquí podemos ver también los valores por defecto.
Callbacks, para cada vez que tengamos una respuesta,
cuando termine de traernos una respuesta,
el error, los headers y el body.
Pues con todo esto,
ya vemos que podemos directamente decirle aquí,
oye, pues quiero que me des los mensajes,
el input también,
el handle input change y el handle submit.
Y ya, o sea, no tienes que crear ningún método.
No tienes que hacer nada más.
Porque ya tienes aquí los mensajes,
el input, lo tienes todo.
Por ejemplo, para el tema del input,
lo vamos a querer mostrar aquí.
Así que el value va a ser el input.
En el tema del on change, cada vez que cambiemos,
pues este handle input change,
lo ponemos aquí.
Y en el formulario, cuando hagamos el on submit,
lo que tenemos que hacer es handle submit.
Y esto automáticamente va a llamar ya
a nuestro método api barra chat barra root.
Vamos a tener que cambiar unas cosas de la API.
Ahora os explicaré por qué.
Pero por ahora,
vamos a tener la parte del front en así.
O sea, que la parte del formulario,
ya no tienes que crear ningún método,
ni handler, ni nada.
Porque el use chat,
que es un custom hook,
que tiene el SDK de Vercell,
ya lo hace todo por ti.
Y lo mismo a la hora de recuperar el mensaje.
Ni siquiera tienes que hacer un estado.
Directamente aquí ya tienes todos los mensajes
que van a ser las respuestas de nuestra API.
Y aquí, si queremos mostrar los mensajes,
pues ponemos messages map.
Y aquí tenemos cada mensaje.
Y en cada mensaje,
div,
key,
message ID.
Por ahora vamos a hacer algo así.
¿Vale?
Luego lo mejoramos un poquito.
Y ya está.
Vamos a ponerle aquí
mxauto,
maxxl,
y px8.
Vamos a ponerlo en columnas.
Y ya está.
Entonces,
con esto,
ya tendríamos toda la parte del frontend.
Ya no hay que hacer nada más.
O sea,
no tienes que pensar en nada más del frontend,
a no ser que haya algún problema.
Hay un detalle todavía que tenemos que hacer.
Y es que,
hay que tener en cuenta
que cuando utilizamos un chat,
cuando tenemos un formulario,
normalmente,
no hablamos de la acción get,
sino que hablamos de la acción post.
Porque lo que queremos es
como enviar datos.
Lo que queremos no es hacer,
quiero recibir datos,
sino que quiero enviarte estos datos,
quiero que los graves,
que los recuerdes,
los hagas,
y luego me des una contestación.
En este caso,
tened en cuenta que el get
va a tener que pasar un post.
Aquí es tan fácil como que puedes poner get,
puedes poner post,
puedes poner put,
patch.
Y esto es como podríais hacer
las diferentes acciones
de los endpoints.
Así que ponemos el post,
porque el formulario,
por defecto,
la acción que hace es un post,
y es lo que va a hacer.
Nuestra primera acconia.
Vale.
Y ahora tenemos que importar
también nuestro querido chat,
que para eso,
para algo lo hemos hecho.
Import chat,
y este chat,
lo vamos a importar,
lo vamos a utilizar aquí,
y tttt,
use chat from the set,
but use chat is on the client.
¿Veis?
Mira,
justo el problema que os decía antes.
¿Qué es lo que está pasando?
Que tenemos aquí el componente chat,
y no le he puesto el use client.
Por defecto,
en NextGS 13,
cuando utilizáis la nueva estructura
de carpetas app,
todos los componentes de React
solo se renderizan en el servidor.
Eso quiere decir
que no pueden interactuar
con el usuario,
con el cliente.
¿Por qué?
Porque aquí no puedes hacer
un non-click en el servidor.
¿Sabes?
No puedes hacer
un non-summit en el servidor.
¿Vale?
Así que...
Ay, sí, gracias.
Que se me ha olvidado un retorno aquí.
Bien visto.
Así que necesitamos
que este componente
se renderice en el cliente.
Y para decirle
que se renderice en el cliente,
le ponemos use client.
¿Vale?
Si no te gusta,
¿qué le vamos a hacer?
Esto es lo que hay,
pero es que
es como funciona NextGS ahora.
Incluso aunque no utilices
el use client,
si ve un on-summit
o un on-change
o un on-click en el componente
y no tiene un use client,
también se va a quejar.
Ponemos el use client
y aquí tenemos
escriba la bolita
para escuchar su consejo.
¿Hola?
Vale.
La bolita no funciona.
No sé si es que no se ve.
Es que no se ve.
O sea, no es que no funcione,
es que no se ve.
Ah, no se ve esto
por culpa de cosas que hay por aquí.
Me parece a mí...
A ver si hay más estilos por aquí.
Global CSS.
Ah, ¿ves?
Ahora ya sabemos por qué no sé.
Lo que le podemos decir...
Vamos a quitar esto.
Color skin light dark.
Y esto, pues al menos,
ya te hace un dark bastante bueno.
Abuelita,
me duele la tripa.
Me duele la tripa.
Le damos al enter.
¡Ay, qué me estás diciendo!
¿Cómo que también te encuentras bien?
Si tienes salud de hierro,
lo que pasa es que te estás dejando vencer
por la flojera.
La universidad es muy importante
para tu futuro
y si estudias programación
vas a tener un trabajo muy bueno
y podrás ganar mucho dinero.
Vale.
Está muy bien, abuelita.
Muchas gracias.
Pero fíjate en lo interesante
de lo rápido que hemos hecho esto.
Lo rápido que hemos hecho esto, ¿no?
Y que rápidamente...
Mira, vamos a hacer una cosa.
En el...
Aquí, yo entiendo que...
Aquí tendríamos el rol también de la abuela.
Esto para que veamos
quién es la abuela
y quién no es la abuela, ¿vale?
Vamos a hacer que el message,
si el rol es igual al usuario,
voy a poner que soy yo, ¿vale?
Y si no, pues es la abuelita.
Ahí está.
Mi abuela.
¿Ves?
Pues ahí está mi abuela dándolo todo
explicándome su vida.
Muy bien.
Abuelita, me duele la tripa
y no sé qué, no sé cuánto.
Vamos a poner formulario este...
ClassFix
Bottom 0
Bueno, Bottom 4
Vale.
Lo vamos a poner ahí abajo.
Escriba la abuelita.
Bueno, esto da igual.
Vamos a poner aquí
Playholder
Playholder
Eh...
Es...
Abuelita, dime cosas bonitas, ¿vale?
Ponemos aquí que esto sea full
y esto también full
ClassName
Full
Padding
Padding top de 8
Padding X de 4
Hostia
Bueno, a ver...
Tampoco quiero...
Que perdamos mucho tiempo, ¿eh?
O sea, solo es para que no esté ahí en medio
y ya está
Abuelita, dime cosas
Dime cosas, abuelita
Abuelita
Rounded
Full
Es que...
Claro, estoy pensando que esto es al revés
¿Vale?
Bueno, abuelita, dime cosas
Xl
Uy, uy, uy
Joder
No sé por qué
Después...
9 de 8
Vamos a poner Shadow
Shadow
Y vamos a ver aquí la abuelita
Bueno, creo que la abuelita está bastante mejor ahora
Shadow
2xl
Y vamos a poner que el borde este sea un poquito más oscuro
Text SM
¿Vale?
No sea tan grande
Bueno, ya tenemos ahí la abuelita, ¿no?
Dime cosas y tal
Pero vamos a hablar de tres conceptos súper importantes para la abuelita
¿Vale?
Para esto del chat GPT y todo esto
Estoy pensando que para mejorar esto
Que si no, se ve igual lo que dice la abuelita y lo que dice el otro
¿Vale?
Vamos a poner
Is abuelita
Vamos a hacer
Si el rol del usuario es diferente a User
Que será Assistant
Es abuelita
¿Vale?
Si es abuelita
Is abuelita
Entonces vamos a poner a la abuelita
Y si no, ponemos a esta
Y lo bueno es que aquí ahora ya ponemos esto
Y aquí vamos a utilizar
Que si es la abuelita
Y esa abuelita
Bueno, pues vamos a ponerle un color
Text
Color Yellow
Venga, vamos a ponerle Yellow
Porque la abuelita
Se pone muy Yellow
Y nos pone esto, ¿vale?
Si la abuelita
Esto aquí
Y esto aquí
No se pongan nerviosos con el rojo, ¿vale?
Que es lo que me ayuda
A saber que estamos haciendo
Y vamos a poner el otro que sea en Blue
Si esa abuelita es Yellow
O si no sé qué
¿Vale?
Y así
Al menos
Pl4
Ya teníamos el color
Ya teníamos el color
Más, pues ya teníamos el color