}\n \n );\n});\n\nModelItem.displayName = \"ModelItem\";\n\nconst PromptInputAttachmentsDisplay = () => {\n const attachments = usePromptInputAttachments();\n\n const handleRemove = useCallback(\n (id: string) => attachments.remove(id),\n [attachments],\n );\n\n if (attachments.files.length === 0) {\n return null;\n }\n\n return (\n \n {attachments.files.map((attachment) => (\n \n ))}\n \n );\n};\n\nconst Example = () => {\n const [model, setModel] = useState(models[0].id);\n const [modelSelectorOpen, setModelSelectorOpen] = useState(false);\n const [status, setStatus] = useState<\n \"submitted\" | \"streaming\" | \"ready\" | \"error\"\n >(\"ready\");\n\n const selectedModelData = models.find((m) => m.id === model);\n\n const handleModelSelect = useCallback((id: string) => {\n setModel(id);\n setModelSelectorOpen(false);\n }, []);\n\n const handleSubmit = useCallback((message: PromptInputMessage) => {\n const hasText = Boolean(message.text);\n const hasAttachments = Boolean(message.files?.length);\n\n if (!(hasText || hasAttachments)) {\n return;\n }\n\n setStatus(\"submitted\");\n\n // eslint-disable-next-line no-console\n console.log(\"Submitting message:\", message);\n\n setTimeout(() => {\n setStatus(\"streaming\");\n }, SUBMITTING_TIMEOUT);\n\n setTimeout(() => {\n setStatus(\"ready\");\n }, STREAMING_TIMEOUT);\n }, []);\n\n return (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Search\n \n \n \n \n {selectedModelData?.chefSlug && (\n \n )}\n {selectedModelData?.name && (\n \n {selectedModelData.name}\n \n )}\n \n \n \n \n \n No models found.\n {[\"OpenAI\", \"Anthropic\", \"Google\"].map((chef) => (\n \n {models\n .filter((m) => m.chef === chef)\n .map((m) => (\n \n ))}\n \n ))}\n \n \n \n \n \n \n \n \n

\n );\n};\n\nexport default Example;\n","deleted","label",[176,177,178,179,158],".claude","skills","ai-elements","scripts","permalink","https://www.val.town/x/drewmcdonald/promptCompare/code/.claude/skills/ai-elements/scripts/prompt-input.tsx","extension","actionData","errors"]