import { Button } from "../../ui/button" import { IconArrowRight } from "../../ui/svg/icons" import { createSignal, For } from "solid-js" import { createToolCaller } from "./components/tool" import { useApi } from "../components/context-api" import { useZero } from "../components/context-zero" import { useWorkspace } from "../components/context-workspace" import { useQuery } from "@rocicorp/zero/solid" import style from "./index.module.css" export default function Index() { const api = useApi() const zero = useZero() const workspace = useWorkspace() const [awsAccounts] = useQuery(() => { return zero.query.aws_account.where("workspace_id", workspace.id) }) // Function to check if there are any active AWS integrations const hasActiveIntegrations = () => { const accounts = awsAccounts() if (!accounts || accounts.length === 0) return false return accounts.some((account) => !account.time_deleted) } const toolCaller = createToolCaller({ tool: { async list() { const response = await api.mcp .$post({ json: { method: "tools/list", params: {}, }, }) .then((r) => r.json() as any) return response.tools }, async call(input) { return await api.mcp .$post({ json: { method: "tools/call", params: { name: input.name, arguments: input.arguments, }, }, }) .then((r) => r.json() as any) }, }, generate: async (prompt) => { return api.ai_generate .$post({ json: prompt, }) .then((r) => r.json() as any) }, onPromptUpdated: () => {}, }) return (

{(item) => { return ( <> {item.role === "user" && item.content[0]?.type === "text" && (

{item.content[0].text}

)} {item.role === "assistant" && item.content[0]?.type === "text" && (

{item.content[0].text}

)} {item.role === "tool" && (() => { const [expanded, setExpanded] = createSignal(false) return (

setExpanded(!expanded())} > {item.content[0].toolName} +

{JSON.stringify(item.content[0].result)}

) })()} ) }} {toolCaller.state.type === "loading" && (

■ ■ ■

)} {toolCaller.prompt.filter((item) => item.role !== "system").length > 0 && (

)}

{
              const value = e.currentTarget.value.trim()
              if (e.key === "Enter" && value) {
                e.preventDefault()
                e.currentTarget.value = ""

// Check has integrations
                if (!hasActiveIntegrations()) {
                  toolCaller.addCustomMessage(
                    value,
                    "I need access to your AWS account first. Please go to Integrations, connect your AWS account, and then I can help you.",
                  )
                } else {
                  toolCaller.chat(value)
                }
              }
            }}
            onInput={(e) => {
              const input = e.currentTarget
              const sendButton = input.nextElementSibling as HTMLButtonElement
              if (sendButton) {
                sendButton.disabled = !e.target.value.trim()
              }

// Auto-grow
              e.target.style.height = "3.6875rem"
              const scrollHeight = input.scrollHeight
              e.target.style.height = `${scrollHeight}px`
            }}
          />
          <Button disabled color="ghost" icon={<IconArrowRight />} />
        </div>
      </div>
    </div>
  )
}
</article></body></html>