73:["$","pre",null,{"children":["$","code",null,{"className":"hljs language-tsx","children":[["$","span",null,{"className":"hljs-string","children":"\"use client\""}],";\n\n",["$","span",null,{"className":"hljs-keyword","children":"import"}]," { useChat } ",["$","span",null,{"className":"hljs-keyword","children":"from"}]," ",["$","span",null,{"className":"hljs-string","children":"\"ai/react\""}],";\n\n",["$","span",null,{"className":"hljs-keyword","children":"export"}]," ",["$","span",null,{"className":"hljs-keyword","children":"default"}]," ",["$","span",null,{"className":"hljs-keyword","children":"function"}]," ",["$","span",null,{"className":"hljs-title function_","children":"Chat"}],"(",["$","span",null,{"className":"hljs-params"}],") {\n ",["$","span",null,{"className":"hljs-keyword","children":"const"}]," { messages, input, handleInputChange, handleSubmit } = ",["$","span",null,{"className":"hljs-title function_","children":"useChat"}],"();\n\n ",["$","span",null,{"className":"hljs-keyword","children":"return"}]," (\n ",["$","span",null,{"className":"xml","children":[["$","span",null,{"className":"hljs-tag","children":["<",["$","span",null,{"className":"hljs-name","children":"div"}]," ",["$","span",null,{"className":"hljs-attr","children":"className"}],"=",["$","span",null,{"className":"hljs-string","children":"\"mx-auto w-full max-w-md py-24 flex flex-col stretch\""}],">"]}],"\n {messages.map((m) => (\n ",["$","span",null,{"className":"hljs-tag","children":["<",["$","span",null,{"className":"hljs-name","children":"div"}]," ",["$","span",null,{"className":"hljs-attr","children":"key"}],"=",["$","span",null,{"className":"hljs-string","children":"{m.id}"}],">"]}],"\n {m.role === \"user\" ? \"User: \" : \"AI: \"}\n {m.content}\n ",["$","span",null,{"className":"hljs-tag","children":[""]}],"\n ))}\n\n ",["$","span",null,{"className":"hljs-tag","children":["<",["$","span",null,{"className":"hljs-name","children":"form"}]," ",["$","span",null,{"className":"hljs-attr","children":"onSubmit"}],"=",["$","span",null,{"className":"hljs-string","children":"{handleSubmit}"}],">"]}],"\n ",["$","span",null,{"className":"hljs-tag","children":["<",["$","span",null,{"className":"hljs-name","children":"label"}],">"]}],"\n Say something...\n ",["$","span",null,{"className":"hljs-tag","children":["<",["$","span",null,{"className":"hljs-name","children":"input"}],"\n ",["$","span",null,{"className":"hljs-attr","children":"className"}],"=",["$","span",null,{"className":"hljs-string","children":"\"fixed w-full max-w-md bottom-0 border border-gray-300 rounded mb-8 shadow-xl p-2\""}],"\n ",["$","span",null,{"className":"hljs-attr","children":"value"}],"=",["$","span",null,{"className":"hljs-string","children":"{input}"}],"\n ",["$","span",null,{"className":"hljs-attr","children":"onChange"}],"=",["$","span",null,{"className":"hljs-string","children":"{handleInputChange}"}],"\n />"]}],"\n ",["$","span",null,{"className":"hljs-tag","children":[""]}],"\n ",["$","span",null,{"className":"hljs-tag","children":["<",["$","span",null,{"className":"hljs-name","children":"button"}]," ",["$","span",null,{"className":"hljs-attr","children":"type"}],"=",["$","span",null,{"className":"hljs-string","children":"\"submit\""}],">"]}],"Send",["$","span",null,{"className":"hljs-tag","children":[""]}],"\n ",["$","span",null,{"className":"hljs-tag","children":[""]}],"\n ",["$","span",null,{"className":"hljs-tag","children":[""]}]]}],"\n );\n}\n"]}]}]

zachary zulanas