WIP Add an Assistants Playground for a hosted demo

.prettierrc.cjs

@@ -9,7 +9,14 @@ module.exports = {
   bracketSameLine: false,
   arrowParens: 'always',
   trailingComma: 'none',
-  importOrder: ['^node:.*', '<THIRD_PARTY_MODULES>', '^(~/(.*)$)', '^[./]'],
+  importOrder: [
+    '^node:.*',
+    'server-only',
+    'openai/shims/web',
+    '<THIRD_PARTY_MODULES>',
+    '^([~@]/(.*)$)',
+    '^[./]'
+  ],
   importOrderSeparation: true,
   importOrderSortSpecifiers: true,
   importOrderGroupNamespaceSpecifiers: true

playground/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

playground/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

playground/app/assistants/[assistantId]/components/code-viewer.tsx

@@ -0,0 +1,93 @@
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@/components/ui/dialog'
+
+export function CodeViewer() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant='secondary'>View code</Button>
+      </DialogTrigger>
+
+      <DialogContent className='sm:max-w-[625px]'>
+        <DialogHeader>
+          <DialogTitle>View code</DialogTitle>
+
+          <DialogDescription>
+            You can use the following code to start integrating your current
+            prompt and settings into your application.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className='grid gap-4'>
+          <div className='rounded-md bg-black p-6'>
+            <pre>
+              <code className='grid gap-1 text-sm text-muted-foreground [&_span]:h-4'>
+                <span>
+                  <span className='text-sky-300'>import</span> os
+                </span>
+                <span>
+                  <span className='text-sky-300'>import</span> openai
+                </span>
+                <span />
+                <span>
+                  openai.api_key = os.getenv(
+                  <span className='text-green-300'>
+                    &quot;OPENAI_API_KEY&quot;
+                  </span>
+                  )
+                </span>
+                <span />
+                <span>response = openai.Completion.create(</span>
+                <span>
+                  {' '}
+                  model=
+                  <span className='text-green-300'>&quot;davinci&quot;</span>,
+                </span>
+                <span>
+                  {' '}
+                  prompt=<span className='text-amber-300'>&quot;&quot;</span>,
+                </span>
+                <span>
+                  {' '}
+                  temperature=<span className='text-amber-300'>0.9</span>,
+                </span>
+                <span>
+                  {' '}
+                  max_tokens=<span className='text-amber-300'>5</span>,
+                </span>
+                <span>
+                  {' '}
+                  top_p=<span className='text-amber-300'>1</span>,
+                </span>
+                <span>
+                  {' '}
+                  frequency_penalty=<span className='text-amber-300'>0</span>,
+                </span>
+                <span>
+                  {' '}
+                  presence_penalty=<span className='text-green-300'>0</span>,
+                </span>
+                <span>)</span>
+              </code>
+            </pre>
+          </div>
+
+          <div>
+            <p className='text-sm text-muted-foreground'>
+              Your API Key can be found here. You should use environment
+              variables or a secret management tool to expose your key to your
+              applications.
+            </p>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

playground/app/assistants/[assistantId]/components/maxlength-selector.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import * as React from 'react'
+import type { SliderProps } from '@radix-ui/react-slider'
+
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+} from '@/components/ui/hover-card'
+import { Label } from '@/components/ui/label'
+import { Slider } from '@/components/ui/slider'
+
+interface MaxLengthSelectorProps {
+  defaultValue: SliderProps['defaultValue']
+}
+
+export function MaxLengthSelector({ defaultValue }: MaxLengthSelectorProps) {
+  const [value, setValue] = React.useState(defaultValue)
+
+  return (
+    <div className='grid gap-2 pt-2'>
+      <HoverCard openDelay={200}>
+        <HoverCardTrigger asChild>
+          <div className='grid gap-4'>
+            <div className='flex items-center justify-between'>
+              <Label htmlFor='maxlength'>Maximum Length</Label>
+
+              <span className='w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border'>
+                {value}
+              </span>
+            </div>
+
+            <Slider
+              id='maxlength'
+              max={4000}
+              defaultValue={value}
+              step={10}
+              onValueChange={setValue}
+              className='[&_[role=slider]]:h-4 [&_[role=slider]]:w-4'
+              aria-label='Maximum Length'
+            />
+          </div>
+        </HoverCardTrigger>
+
+        <HoverCardContent
+          align='start'
+          className='w-[260px] text-sm'
+          side='left'
+        >
+          The maximum number of tokens to generate. Requests can use up to 2,048
+          or 4,000 tokens, shared between prompt and completion. The exact limit
+          varies by model.
+        </HoverCardContent>
+      </HoverCard>
+    </div>
+  )
+}

playground/app/assistants/[assistantId]/components/model-selector.tsx

@@ -0,0 +1,173 @@
+'use client'
+
+import * as React from 'react'
+import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons'
+import type { PopoverProps } from '@radix-ui/react-popover'
+
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+} from '@/components/ui/hover-card'
+import { Label } from '@/components/ui/label'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from '@/components/ui/popover'
+import { useMutationObserver } from '@/hooks/use-mutation-observer'
+import { cn } from '@/lib/utils'
+
+import type { Model, ModelType } from '../data/models'
+
+interface ModelSelectorProps extends PopoverProps {
+  types: readonly ModelType[]
+  models: Model[]
+}
+
+export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
+  const [open, setOpen] = React.useState(false)
+  const [selectedModel, setSelectedModel] = React.useState<Model>(models[0])
+  const [peekedModel, setPeekedModel] = React.useState<Model>(models[0])
+
+  return (
+    <div className='grid gap-2'>
+      <HoverCard openDelay={200}>
+        <HoverCardTrigger asChild>
+          <Label htmlFor='model'>Model</Label>
+        </HoverCardTrigger>
+
+        <HoverCardContent
+          align='start'
+          className='w-[260px] text-sm'
+          side='left'
+        >
+          The model which will generate the completion. Some models are suitable
+          for natural language tasks, others specialize in code. Learn more.
+        </HoverCardContent>
+      </HoverCard>
+
+      <Popover open={open} onOpenChange={setOpen} {...props}>
+        <PopoverTrigger asChild>
+          <Button
+            variant='outline'
+            role='combobox'
+            aria-expanded={open}
+            aria-label='Select a model'
+            className='w-full justify-between'
+          >
+            {selectedModel ? selectedModel.name : 'Select a model...'}
+
+            <CaretSortIcon className='ml-2 h-4 w-4 shrink-0 opacity-50' />
+          </Button>
+        </PopoverTrigger>
+
+        <PopoverContent align='end' className='w-[250px] p-0'>
+          <HoverCard>
+            <HoverCardContent
+              side='left'
+              align='start'
+              forceMount
+              className='min-h-[280px]'
+            >
+              <div className='grid gap-2'>
+                <h4 className='font-medium leading-none'>{peekedModel.name}</h4>
+                <div className='text-sm text-muted-foreground'>
+                  {peekedModel.description}
+                </div>
+
+                {peekedModel.strengths ? (
+                  <div className='mt-4 grid gap-2'>
+                    <h5 className='text-sm font-medium leading-none'>
+                      Strengths
+                    </h5>
+                    <ul className='text-sm text-muted-foreground'>
+                      {peekedModel.strengths}
+                    </ul>
+                  </div>
+                ) : null}
+              </div>
+            </HoverCardContent>
+
+            <Command loop>
+              <CommandList className='h-[var(--cmdk-list-height)] max-h-[400px]'>
+                <CommandInput placeholder='Search Models...' />
+
+                <CommandEmpty>No Models found.</CommandEmpty>
+
+                <HoverCardTrigger />
+
+                {types.map((type) => (
+                  <CommandGroup key={type} heading={type}>
+                    {models
+                      .filter((model) => model.type === type)
+                      .map((model) => (
+                        <ModelItem
+                          key={model.id}
+                          model={model}
+                          isSelected={selectedModel?.id === model.id}
+                          onPeek={(model) => setPeekedModel(model)}
+                          onSelect={() => {
+                            setSelectedModel(model)
+                            setOpen(false)
+                          }}
+                        />
+                      ))}
+                  </CommandGroup>
+                ))}
+              </CommandList>
+            </Command>
+          </HoverCard>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+interface ModelItemProps {
+  model: Model
+  isSelected: boolean
+  onSelect: () => void
+  onPeek: (model: Model) => void
+}
+
+function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
+  const ref = React.useRef<HTMLDivElement>(null)
+
+  useMutationObserver(ref, (mutations: any[]) => {
+    for (const mutation of mutations) {
+      if (mutation.type === 'attributes') {
+        if (mutation.attributeName === 'aria-selected') {
+          onPeek(model)
+        }
+      }
+    }
+  })
+
+  return (
+    <CommandItem
+      key={model.id}
+      onSelect={onSelect}
+      ref={ref}
+      className='aria-selected:bg-primary aria-selected:text-primary-foreground'
+    >
+      {model.name}
+
+      <CheckIcon
+        className={cn(
+          'ml-auto h-4 w-4',
+          isSelected ? 'opacity-100' : 'opacity-0'
+        )}
+      />
+    </CommandItem>
+  )
+}