\n \n \n

\n {selectedAgent ? (\n <>\n {selectedAgent.avatar}\n {selectedAgent.name}\n \n ) : (\n <>\n ✨\n Pi\n \n )}\n

\n \n

\n \n \n

\n \n

\n {agents.map((agent) => (\n

handleAgentChange(agent)}\n >\n {agent.avatar}\n {agent.name}\n

\n ))}\n

\n \n

\n {messages.length === 0 && (\n

Welcome to Pi

Your personal AI assistant

Ask me anything to get started!

\n )}\n \n {messages.map((message, index) => (\n

\n {message.sender === 'user' ? (\n message.content\n ) : (\n \n )}\n

\n \n {message.sender === 'assistant' && (\n

\n \n \n \n

\n )}\n

\n ))}\n \n {isLoading && (\n

\n )}\n \n

\n \n

\n {messages.length > 0 && (\n

\n {categories.map((category) => (\n \n ))}\n

\n )}\n \n {messages.length > 0 && filteredSuggestions.length > 0 && (\n

\n {filteredSuggestions.map((suggestion) => (\n \n ))}\n

\n )}\n \n

\n {quickActions.map((action) => (\n \n ))}\n

\n \n setInputValue(e.target.value)}\n onKeyDown={handleKeyDown}\n disabled={isLoading}\n />\n \n \n

\n );\n}","deleted","label",[171,172,153],"frontend","components","permalink","https://www.val.town/x/Arthur88/reactHonoStarter/code/frontend/components/ChatInterface.tsx","extension","actionData","errors"]