chore: update artifacts [skip ci]

Author: github-actions[bot]

public/ai-chatgpt/public/screenshot.png

@@ -0,0 +1,64 @@
+import type {PageContext} from './content/scripts'
+
+const isFirefoxLike =
+  import.meta.env.EXTENSION_PUBLIC_BROWSER === 'firefox' ||
+  import.meta.env.EXTENSION_PUBLIC_BROWSER === 'gecko-based'
+
+if (isFirefoxLike) {
+  browser.browserAction.onClicked.addListener(() => {
+    browser.sidebarAction.open()
+  })
+} else {
+  chrome.action.onClicked.addListener(() => {
+    chrome.sidePanel.setPanelBehavior({openPanelOnActionClick: true})
+  })
+}
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message?.type === 'openSidebar') {
+    if (isFirefoxLike) {
+      browser.sidebarAction.open()
+      return
+    }
+    // Must be invoked synchronously inside the message handler so the
+    // user-gesture context from the content-script click is preserved.
+    chrome.sidePanel.setPanelBehavior({openPanelOnActionClick: true})
+    const tabId = sender.tab?.id
+    if (chrome.sidePanel.open && tabId !== undefined) {
+      try {
+        chrome.sidePanel.open({tabId})
+      } catch (error) {
+        console.error(error)
+      }
+    }
+    return
+  }
+
+  if (message?.type !== 'getActiveTabContext') return
+
+  ;(async () => {
+    try {
+      const [tab] = await chrome.tabs.query({
+        active: true,
+        lastFocusedWindow: true
+      })
+      if (!tab?.id) {
+        sendResponse({ok: false, error: 'No active tab'})
+        return
+      }
+      const context = (await chrome.tabs.sendMessage(tab.id, {
+        type: 'getPageContext'
+      })) as PageContext | undefined
+      if (!context) {
+        sendResponse({ok: false, error: 'No page context received'})
+        return
+      }
+      sendResponse({ok: true, context})
+    } catch (err) {
+      const error = err instanceof Error ? err.message : String(err)
+      sendResponse({ok: false, error})
+    }
+  })()
+
+  return true
+})

public/ai-chatgpt/screenshot.png

@@ -0,0 +1,70 @@
+import {useState} from 'react'
+import {KeyRound} from 'lucide-react'
+import {Button} from './ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from './ui/card'
+
+interface ApiKeyFormProps {
+  onSubmit: (key: string) => void
+}
+
+export default function ApiKeyForm({onSubmit}: ApiKeyFormProps) {
+  const [key, setKey] = useState('')
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    const trimmed = key.trim()
+    if (trimmed) {
+      onSubmit(trimmed)
+    }
+  }
+
+  return (
+    <div className="flex h-screen items-center justify-center p-4">
+      <Card className="w-full">
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <KeyRound className="size-5 text-muted-foreground" />
+            <CardTitle>ChatGPT API Key</CardTitle>
+          </div>
+          <CardDescription>
+            Enter your ChatGPT API key to start chatting. Your key is stored
+            locally in extension storage and never sent anywhere except
+            ChatGPT's API.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="flex flex-col gap-3">
+            <input
+              type="password"
+              value={key}
+              onChange={(e) => setKey(e.target.value)}
+              placeholder="sk-..."
+              autoFocus
+              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+            <Button type="submit" disabled={!key.trim()}>
+              Save & Start Chatting
+            </Button>
+            <p className="text-xs text-muted-foreground">
+              Get your API key at{' '}
+              <a
+                href="https://platform.openai.com/api-keys"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline"
+              >
+                platform.openai.com
+              </a>
+            </p>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

public/ai-chatgpt/src/background.ts

@@ -0,0 +1,60 @@
+import {useState, useRef, useEffect} from 'react'
+import {SendHorizontal} from 'lucide-react'
+import {Button} from './ui/button'
+
+interface ChatInputProps {
+  onSend: (message: string) => void
+  disabled?: boolean
+}
+
+export default function ChatInput({onSend, disabled}: ChatInputProps) {
+  const [input, setInput] = useState('')
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto'
+      textareaRef.current.style.height =
+        Math.min(textareaRef.current.scrollHeight, 120) + 'px'
+    }
+  }, [input])
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    const trimmed = input.trim()
+    if (trimmed && !disabled) {
+      onSend(trimmed)
+      setInput('')
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSubmit(e)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex items-end gap-2 border-t p-3">
+      <textarea
+        ref={textareaRef}
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Message ChatGPT..."
+        disabled={disabled}
+        rows={1}
+        className="flex min-h-9 max-h-[120px] flex-1 resize-none rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
+      />
+      <Button
+        type="submit"
+        size="icon"
+        disabled={disabled || !input.trim()}
+        aria-label="Send message"
+      >
+        <SendHorizontal className="size-4" />
+      </Button>
+    </form>
+  )
+}

public/ai-chatgpt/src/components/ApiKeyForm.tsx

@@ -0,0 +1,41 @@
+import {Bot, User} from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
+import type {Message} from '../lib/client'
+import {cn} from '../lib/utils'
+
+interface ChatMessageProps {
+  message: Message
+}
+
+export default function ChatMessage({message}: ChatMessageProps) {
+  const isUser = message.role === 'user'
+
+  return (
+    <div
+      className={cn(
+        'flex gap-3 px-4 py-3',
+        isUser ? 'bg-transparent' : 'bg-muted/50'
+      )}
+    >
+      <div
+        className={cn(
+          'flex size-7 shrink-0 items-center justify-center rounded-md',
+          isUser
+            ? 'bg-primary text-primary-foreground'
+            : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300'
+        )}
+      >
+        {isUser ? <User className="size-4" /> : <Bot className="size-4" />}
+      </div>
+      <div className="min-w-0 flex-1 text-sm leading-relaxed">
+        {isUser ? (
+          <p className="whitespace-pre-wrap">{message.content}</p>
+        ) : (
+          <div className="prose prose-sm dark:prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+            <ReactMarkdown>{message.content}</ReactMarkdown>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

public/ai-chatgpt/src/components/ChatInput.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import {Slot} from '@radix-ui/react-slot'
+import {cva, type VariantProps} from 'class-variance-authority'
+
+import {cn} from '@/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline'
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({variant, size, className}))}
+      {...props}
+    />
+  )
+}
+
+export {Button, buttonVariants}

public/ai-chatgpt/src/components/ChatMessage.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react'
+
+import {cn} from '../../lib/utils'
+
+function Card({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): React.JSX.Element {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): React.JSX.Element {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): React.JSX.Element {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): React.JSX.Element {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function CardContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): React.JSX.Element {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-6', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): React.JSX.Element {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  )
+}
+
+export {Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent}