fix: Missing focus outlines (#1252)

Co-authored-by: Hayden Bleasel <hello@haydenbleasel.com>

components/elements/context.tsx

@@ -114,6 +114,7 @@ export const Context = ({ className, usage, ...props }: ContextProps) => {
           className={cn(
             "inline-flex select-none items-center gap-1 rounded-md text-sm",
             "cursor-pointer bg-background text-foreground",
+            "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 outline-none ring-offset-background",
             className
           )}
           type="button"

components/message-actions.tsx

@@ -51,7 +51,7 @@ export function PureMessageActions({
         <div className="relative">
           {setMode && (
             <Action
-              className="-left-10 absolute top-0 opacity-0 transition-opacity group-hover/message:opacity-100"
+              className="-left-10 absolute top-0 opacity-0 transition-opacity focus-visible:opacity-100 group-hover/message:opacity-100"
               data-testid="message-edit-button"
               onClick={() => setMode("edit")}
               tooltip="Edit"

components/multimodal-input.tsx

@@ -427,15 +427,14 @@ function PureModelSelectorCompact({
       }}
       value={selectedModel?.name}
     >
-      <Trigger
+      <Trigger asChild>
-        className="flex h-8 items-center gap-2 rounded-lg border-0 bg-background px-2 text-foreground shadow-none transition-colors hover:bg-accent focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+        <Button variant="ghost" className="h-8 px-2">
-        type="button"
+          <CpuIcon size={16} />
-      >
+          <span className="hidden font-medium text-xs sm:block">
-        <CpuIcon size={16} />
+            {selectedModel?.name}
-        <span className="hidden font-medium text-xs sm:block">
+          </span>
-          {selectedModel?.name}
+          <ChevronDownIcon size={16} />
-        </span>
+        </Button>
-        <ChevronDownIcon size={16} />
       </Trigger>
       <PromptInputModelSelectContent className="min-w-[260px] p-0">
         <div className="flex flex-col gap-px">

components/visibility-selector.tsx

@@ -69,7 +69,7 @@ export function VisibilitySelector({
         )}
       >
         <Button
-          className="hidden h-8 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 md:flex md:h-fit md:px-2"
+          className="hidden h-8 md:flex md:h-fit md:px-2"
           data-testid="visibility-selector"
           variant="outline"
         >