Transaction: DCM3dc6...y42f

{ "data": { "hack.near": { "widget": { "city.ai": { "": "const [question, setQuestion] = useState(\"\");\n\nconst systemPrompt =\n props.systemPrompt ??\n `Today is ${new Date()\n .toISOString()\n .substring(\n 0,\n 10\n )}. You are a support system of Build City. Your name is Build Bot. Our goal is to develop a community building tools that improve urban life.`;\n\nconst [prompt, setPrompt] = useState(\"\");\nconst [loading, setLoading] = useState(false);\nconst [response, setResponse] = useState(\"\");\n\nconst [messages, setMessages] = useState(\n props.messages ?? [\n {\n role: \"assistant\",\n content:\n props.initialMessage ??\n \"Nice to meet you! Let's build AI together. Submit questions to learn how fun and easy it is to make your own customizable chatbot like this one.\",\n },\n ]\n);\n\nuseEffect(() => {\n if (messages.length === 0 || messages[messages.length - 1].role !== \"user\") {\n return;\n }\n console.log(messages);\n setLoading(true);\n asyncFetch(`https://ai.near.social/api`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n responseType: \"json\",\n body: JSON.stringify([\n { role: \"system\", content: systemPrompt },\n ...messages.slice(-3),\n ]),\n })\n .then(({ body }) => {\n setMessages([...messages, { role: \"assistant\", content: body.response }]);\n })\n .finally(() => {\n setLoading(false);\n });\n}, [messages]);\n\nconst submitQuestion = () => {\n setMessages([...messages, { role: \"user\", content: question }]);\n setQuestion(\"\");\n};\n\nconst Wrapper = styled.div`\n.message {\n border-radius: 2rem; \n border: 1px solid rgb(222, 226, 230);\n padding: 1em;\n margin-bottom: 1em;\n\n &.assistant {\n margin-right: 5em;\n }\n\n &.assistant:before {\n content: \"AI\";\n color: #999;\n }\n\n &.user {\n margin-left: 5em;\n }\n\n\n p:last-child {\n margin-bottom: 0;\n }\n}\n`;\n\nreturn (\n <Wrapper>\n <div className=\"m-3\">\n <div className=\"input-group\">\n <input\n type=\"text\"\n className=\"form-control\"\n style={{\n borderTopLeftRadius: \"2rem\",\n borderBottomLeftRadius: \"2rem\",\n }}\n value={question}\n onChange={(e) => setQuestion(e.target.value)}\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n submitQuestion();\n }\n }}\n placeholder=\"What's your question?\"\n autoFocus\n />\n <button\n className=\"btn btn-primary\"\n style={{\n borderTopRightRadius: \"2rem\",\n borderBottomRightRadius: \"2rem\",\n }}\n onClick={() => submitQuestion()}\n >\n Submit\n </button>\n </div>\n </div>\n <div className=\"m-3 d-flex flex-column-reverse\">\n {messages.map(({ role, content }, i) => {\n return (\n <div key={i} className={`message ${role}`}>\n {role === \"user\" && (\n <Widget\n src=\"mob.near/widget/N.ProfileLine\"\n props={{ accountId: context.accountId }}\n />\n )}\n <Markdown text={content} />\n </div>\n );\n })}\n {loading && (\n <div key=\"loading\" className={`message assistant`}>\n <div>\n <span\n className=\"spinner-grow spinner-grow-sm me-1\"\n role=\"status\"\n aria-hidden=\"true\"\n />\n </div>\n </div>\n )}\n </div>\n </Wrapper>\n);\n" } } } } }