feat: bump headless

And get ourselves a floating ui!

biome.json

@@ -17,7 +17,8 @@
         "useImportRestrictions": "off",
         "useSortedClasses": "off",
         "noConsole": "off",
-        "useDefaultSwitchClause": "off"
+        "useDefaultSwitchClause": "off",
+        "noReactSpecificProps": "off"
       },
       "style": {
         "noImplicitBoolean": "off",

deno.json

@@ -26,7 +26,7 @@
     "$fresh/": "https://deno.land/x/fresh@1.6.8/",
     "$tabler_icons/": "https://deno.land/x/tabler_icons_tsx@0.0.6/tsx/",
     "@deno/gfm": "https://deno.land/x/gfm@0.6.0/mod.ts",
-    "@headlessui/react": "https://esm.sh/v135/*@headlessui/react@1.7.17",
+    "@headlessui/react": "https://esm.sh/v135/*@headlessui/react@2.0.3",
     "@headlessui/tailwindcss": "npm:@headlessui/tailwindcss@0.2.0",
     "@mdx-js/mdx": "npm:@mdx-js/mdx@3.0.1",
     "@preact/signals": "https://esm.sh/v135/*@preact/signals@1.2.3",
@@ -35,11 +35,12 @@
     "@std/path": "jsr:@std/path@^0.224.0",
     "@tailwindcss/forms": "npm:@tailwindcss/forms@0.5.7",
     "@tailwindcss/typography": "npm:@tailwindcss/typography@0.5.13",
+    "clsx": "npm:clsx@2.1.1",
     "idb-keyval": "npm:idb-keyval@6.2.1",
     "openai": "https://deno.land/x/openai@v4.43.0/mod.ts",
     "openai/": "https://deno.land/x/openai@v4.43.0/",
-    "preact": "https://esm.sh/v135/preact@10.21.0",
-    "preact/": "https://esm.sh/v135/preact@10.21.0/",
+    "preact": "https://esm.sh/v135/*preact@10.21.0",
+    "preact/": "https://esm.sh/v135/*preact@10.21.0/",
     "rehype-mathjax": "npm:rehype-mathjax@6.0.0",
     "remark-frontmatter": "npm:remark-frontmatter@5.0.0",
     "remark-lint-checkbox-content-indent": "npm:remark-lint-checkbox-content-indent@5.0.0",
@@ -59,16 +60,33 @@
     "vfile": "npm:vfile@6.0.1",
     "vfile-matter": "npm:vfile-matter@5.0.0",
     "vfile-reporter": "npm:vfile-reporter@8.1.1",
-    "zod": "https://deno.land/x/zod@v3.23.7/mod.ts"
+    "zod": "https://deno.land/x/zod@v3.23.8/mod.ts"
   },
   "scopes": {
     "https://esm.sh/v135/": {
+      "@floating-ui/core": "npm:@floating-ui/core@1.6.1",
+      "@floating-ui/dom": "npm:@floating-ui/dom@1.6.5",
+      "@floating-ui/react": "https://esm.sh/v135/*@floating-ui/react@0.26.13",
+      "@floating-ui/react/": "https://esm.sh/v135/*@floating-ui/react@0.26.13/",
+      "@floating-ui/react-dom": "https://esm.sh/v135/*@floating-ui/react-dom@2.0.9",
+      "@floating-ui/utils": "https://esm.sh/v135/*@floating-ui/utils@0.2.2",
+      "@floating-ui/utils/": "https://esm.sh/v135/*@floating-ui/utils@0.2.2/",
+      "@react-aria/focus": "https://esm.sh/v135/*@react-aria/focus@3.17.0",
+      "@react-aria/interactions": "https://esm.sh/v135/*@react-aria/interactions@3.21.2",
+      "@react-aria/ssr": "https://esm.sh/v135/*@react-aria/ssr@3.9.3",
+      "@react-aria/utils": "https://esm.sh/v135/*@react-aria/utils@3.24.0",
+      "@react-stately/utils": "npm:@react-stately/utils@3.10.0",
       "@preact/signals-react": "https://esm.sh/v135/*@preact/signals@1.2.3",
-      "client-only": "https://esm.sh/v135/client-only@0.0.1",
-      "react-dom": "https://esm.sh/v135/preact@10.21.0/compat",
-      "react": "https://esm.sh/v135/preact@10.21.0/compat",
-      "react/jsx-runtime": "https://esm.sh/v135/preact@10.21.0/jsx-runtime",
-      "react-dom/test-utils": "https://esm.sh/v135/preact@10.21.0/test-utils"
+      "@swc/helpers/": "https://esm.sh/v135/*@swc/helpers@0.5.11/",
+      "@tanstack/react-virtual": "https://esm.sh/v135/*@tanstack/react-virtual@3.5.0",
+      "@tanstack/virtual-core": "npm:@tanstack/virtual-core@3.5.0",
+      "client-only": "npm:client-only@0.0.1",
+      "node:process": "https://esm.sh/v135/*node_process.js",
+      "react-dom": "https://esm.sh/v135/*preact@10.21.0/compat",
+      "react": "https://esm.sh/v135/*preact@10.21.0/compat",
+      "react/jsx-runtime": "https://esm.sh/v135/*preact@10.21.0/jsx-runtime",
+      "react-dom/test-utils": "https://esm.sh/v135/*preact@10.21.0/test-utils",
+      "tabbable": "npm:tabbable@6.2.0"
     }
   },
   "compilerOptions": {

src/components/Header.tsx

@@ -29,7 +29,9 @@ export interface HeaderProps {
 export function Header({ active }: HeaderProps): JSX.Element {
   return (
     <header class="max-w-screen-xlg flex w-full flex-col flex-wrap gap-4 bg-slate-50 px-8 py-6 sm:flex-row dark:bg-slate-950">
-      <HomeLink />
+      <div class="flex-shrink-0 flex-grow">
+        <HomeLink />
+      </div>
       <ul class="flex flex-shrink flex-row flex-wrap items-center gap-6">
         {menus.map((menu: Menu) => (
           <li key={menu.title} class="flex h-8 flex-row items-end">
@@ -56,7 +58,7 @@ export function Header({ active }: HeaderProps): JSX.Element {
 function HomeLink(): JSX.Element {
   return (
     <a
-      class="flex flex-shrink-0 flex-grow flex-row items-center text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+      class="flex max-w-fit flex-row items-center text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
       href="/"
     >
       <Logo aria-hidden="true" class="size-10" />

src/islands/Chatbot.tsx

@@ -1,10 +1,12 @@
+import { IS_BROWSER } from "$fresh/runtime.ts";
 import { render } from "@deno/gfm";
-import { Transition } from "@headlessui/react";
+import { Button, Fieldset, Input } from "@headlessui/react";
 import { useSignal, useSignalEffect } from "@preact/signals";
+import { clsx } from "clsx";
 import { set } from "idb-keyval";
 import type { JSX, RenderableProps } from "preact";
+import { Fragment } from "preact";
 import { Suspense } from "preact/compat";
-import { useId } from "preact/hooks";
 import { Loading } from "../components/Loading.tsx";
 import { chat } from "../sdk/chat/index.ts";
 import { getThread } from "../sdk/chat/thread.ts";
@@ -22,33 +24,33 @@ export function Chatbot(
 
   return (
     <div {...props} class={props.class}>
-      <button
-        class="flex size-14 flex-row items-center justify-center rounded-full bg-blue-400 dark:bg-blue-800"
+      <Button
+        className="flex size-14 flex-row items-center justify-center rounded-full bg-blue-400 dark:bg-blue-800 shadow-2xl"
         onClick={() => {
           isOpen.value = !isOpen.value;
         }}
         type="button"
         aria-label="Meet our Chatbot!"
       >
         <IconMessageChatbot class="size-8" />
-      </button>
-      <Transition
-        appear={true}
-        show={isOpen.value}
-        enter={tw`transition-opacity duration-75`}
-        enterFrom={tw`opacity-0`}
-        enterTo={tw`opacity-100`}
-        leave={tw`transition-opacity duration-150`}
-        leaveFrom={tw`opacity-100`}
-        leaveTo={tw`opacity-0`}
-      >
-        {isOpen.value && (
-          // biome-ignore lint/complexity/noUselessFragments: It's necessary.
-          <Suspense fallback={<></>}>
-            <ChatbotBox class="absolute bottom-20 right-0" />
-          </Suspense>
-        )}
-      </Transition>
+      </Button>
+
+      {isOpen.value && (
+        <Suspense fallback={<Fragment />}>
+          {/* <Transition
+            appear={true}
+            show={isOpen.value}
+            enter={tw`transition-opacity duration-75`}
+            enterFrom={tw`opacity-0`}
+            enterTo={tw`opacity-100`}
+            leave={tw`transition-opacity duration-150`}
+            leaveFrom={tw`opacity-100`}
+            leaveTo={tw`opacity-0`}
+          > */}
+          <ChatbotBox class="absolute bottom-20 right-0 shadow-2xl" />
+          {/* </Transition> */}
+        </Suspense>
+      )}
     </div>
   );
 }
@@ -70,7 +72,6 @@ type Db = DbItem[];
 
 function ChatbotBox(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element {
   const messageValue = useSignal("");
-  const inputId = useId();
   const isAsking = useSignal(false);
   const thread = useIndexedDB<string>(
     "thread",
@@ -104,7 +105,7 @@ function ChatbotBox(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element {
         {messages.value.map((msg) => (
           <div
             key={`${msg.role}${msg.message}`}
-            class={`${getReplySide(msg.role)} ${replyStyles}`}
+            class={clsx(getReplySide(msg.role), replyStyles)}
             // biome-ignore lint/security/noDangerouslySetInnerHtml: It's back!
             dangerouslySetInnerHTML={{ __html: render(msg.message) }}
           />
@@ -150,25 +151,24 @@ function ChatbotBox(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element {
           isAsking.value = false;
         }}
       >
-        <label for={inputId}>Ask A Question, Any Question!</label>
-        <div class="relative">
-          <input
-            id={inputId}
+        <Fieldset disabled={!IS_BROWSER} class="relative">
+          <label>Ask A Question, Any Question!</label>
+          <Input
             value={messageValue.value}
             autoComplete="off"
-            class="pr-10 w-full rounded-lg dark:text-slate-950 whitespace-normal"
-            onInput={(e) => {
+            className="w-full whitespace-normal rounded-lg pr-10 shadow-sm dark:text-slate-950"
+            onInput={(e: JSX.TargetedInputEvent<HTMLInputElement>) => {
               messageValue.value = (e.target as HTMLInputElement).value;
             }}
           />
-          <button
-            class="absolute right-2 top-0 p-2"
+          <Button
+            className="absolute right-2 p-2"
             type="submit"
             aria-label="Send"
           >
             <IconSend class="dark:text-slate-950" />
-          </button>
-        </div>
+          </Button>
+        </Fieldset>
       </form>
     </div>
   );

src/islands/Checkbox.tsx

@@ -0,0 +1,30 @@
+import { IS_BROWSER } from "$fresh/runtime.ts";
+import { Checkbox as Checkmark, Field, Label } from "@headlessui/react";
+import type { JSX } from "preact";
+
+export interface CheckboxProps {
+  name: string;
+  labelText: string;
+  required?: boolean;
+}
+
+export function Checkbox({
+  name,
+  labelText,
+  required,
+}: CheckboxProps): JSX.Element {
+  return (
+    <Field
+      disabled={!IS_BROWSER}
+      class="top-16 flex w-72 flex-col items-center gap-4"
+    >
+      <Label class="text-lg">{labelText}</Label>
+      <Checkmark
+        name={name}
+        /* Removal of ring based on https://romansorin.com/blog/disabling-the-tailwind-input-ring */
+        className="cursor-default rounded border-2 border-slate-500 bg-slate-200 shadow-md focus:outline-none focus:ring-1 focus:ring-offset-0 focus-visible:border-blue-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-800"
+        required={required}
+      />
+    </Field>
+  );
+}