supports button to display different kinds of code

edgenai · Feb 23, 2024 · 34ff3b8 · 34ff3b8
1 parent 9bca3e4
commit 34ff3b8
Show file tree

Hide file tree

Showing 7 changed files with 1,930 additions and 7,009 deletions.
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -31,7 +31,7 @@
     "framer-motion": "7.8.1",
     "mdast-util-to-string": "^3.2.0",
     "mdx-annotations": "^0.1.1",
-    "next": "13.5.1",
+    "next": "^14.0.5",
     "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/docs/src/app/api-reference/chat/page.mdx b/docs/src/app/api-reference/chat/page.mdx
@@ -9,10 +9,11 @@ Generate text from text. {{ className: 'lead' }}
 
 ---
 
-## Create chat completion {{ tag: 'POST', label: 'http://localhost:33322/v1/chat/completions' }}
-
 <Row>
   <Col>
+
+    ## Create chat completion {{tag:'POST', label:'http://localhost:33322/v1/chat/completions'}}
+
     Given a list of messages belonging to a chat history, generate a response.
 
     ### Required attributes
@@ -32,89 +33,98 @@ Generate text from text. {{ className: 'lead' }}
   </Col>
   <Col sticky>
 
-    <CodeGroup title="Request" tag="POST" label="/v1/chat/completions">
-
-    ```bash {{ title: 'cURL' }}
-    curl http://localhost:33322/v1/chat/completions \
-    -H "Content-Type: application/json" \
-    -H "Authorization: Bearer no-key-required" \
-    -d '{
-      "model": "default",
-      "messages": [
-        {
-          "role": "system",
-          "content": "You are EdgenChat, a helpful AI assistant."
-        },
-        {
-          "role": "user",
-          "content": "Hello!"
-        }
-      ],
-      "stream": true
-    }'
-    ```
-
-    ```python
-    from edgen import Edgen
-    client = Edgen()
-
-    completion = client.chat.completions.create(
-      model="default",
-      messages=[
-        {"role": "system", "content": "You are a helpful assistant."},
-        {"role": "user", "content": "Hello!"}
-      ],
-      stream=True
-    )
-
-    for chunk in completion:
-      print(chunk.choices[0].delta)
-    ```
-
-    ```ts
-    import Edgen from "edgen";
-
-    const client = new Edgen();
-
-    async function main() {
-      const completion = await client.chat.completions.create({
-        model: "default",
-        messages: [
-          {"role": "system", "content": "You are a helpful assistant."},
-          {"role": "user", "content": "Hello!"}
-        ],
-        stream: true,
-      });
-
-      for await (const chunk of completion) {
-        console.log(chunk.choices[0].delta.content);
-      }
-    }
-
-    main();
-    ```
-
-    </CodeGroup>
-
-    ```json {{ title: 'Response' }}
-    {"id":"e55b11e3-985b-4fbf-ba2e-5e81e6c100c2","choices":[{"delta":{"content":"Hello","role":null},"finish_reason":null,"index":0}],"created":1706718034,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
-
-    {"id":"010b3954-af7c-4360-9891-1d6c5e27da8c","choices":[{"delta":{"content":"!","role":null},"finish_reason":null,"index":0}],"created":1706718040,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
-
-    {"id":"7455343f-99bc-4d63-9d03-cc8e75fab29c","choices":[{"delta":{"content":" How","role":null},"finish_reason":null,"index":0}],"created":1706718044,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
-
-    {"id":"82f72e44-162d-4e21-93c6-387950a61c79","choices":[{"delta":{"content":" can","role":null},"finish_reason":null,"index":0}],"created":1706718049,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
-
-    {"id":"7d451531-d117-48b1-9e68-2554338e34ba","choices":[{"delta":{"content":" I","role":null},"finish_reason":null,"index":0}],"created":1706718053,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
-
-    {"id":"66fe6034-c97d-4c46-8c05-bf73804e557d","choices":[{"delta":{"content":" assist","role":null},"finish_reason":null,"index":0}],"created":1706718059,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
-
-    {"id":"56a260a8-f41b-4954-9b67-e6620fb32f0d","choices":[{"delta":{"content":" you","role":null},"finish_reason":null,"index":0}],"created":1706718063,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
-
-    {"id":"ccef46ce-ba8b-4ac8-8262-a66cb96832a5","choices":[{"delta":{"content":" today","role":null},"finish_reason":null,"index":0}],"created":1706718068,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
-
-    {"id":"0d2b9ba2-ab04-4aed-ad51-72a89acb3122","choices":[{"delta":{"content":"?","role":null},"finish_reason":null,"index":0}],"created":1706718069,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
-    ```
+  <ButtonRow types={["Streaming", "Non-Streaming"]}>
+
+      <div>
+        <CodeGroup title="Request" tag="POST" label="/v1/chat/completions">
+
+          ```bash {{ title: 'cURL' }}
+          curl http://localhost:33322/v1/chat/completions \
+          -H "Content-Type: application/json" \
+          -H "Authorization: Bearer no-key-required" \
+          -d '{
+            "model": "default",
+            "messages": [
+              {
+                "role": "system",
+                "content": "You are EdgenChat, a helpful AI assistant."
+              },
+              {
+                "role": "user",
+                "content": "Hello!"
+              }
+            ],
+            "stream": true
+          }'
+          ```
+
+          ```python
+          from edgen import Edgen
+          client = Edgen()
+
+          completion = client.chat.completions.create(
+            model="default",
+            messages=[
+              {"role": "system", "content": "You are a helpful assistant."},
+              {"role": "user", "content": "Hello!"}
+            ],
+            stream=True
+          )
+
+          for chunk in completion:
+            print(chunk.choices[0].delta)
+          ```
+
+          ```ts
+          import Edgen from "edgen";
+
+          const client = new Edgen();
+
+          async function main() {
+            const completion = await client.chat.completions.create({
+              model: "default",
+              messages: [
+                {"role": "system", "content": "You are a helpful assistant."},
+                {"role": "user", "content": "Hello!"}
+              ],
+              stream: true,
+            });
+
+            for await (const chunk of completion) {
+              console.log(chunk.choices[0].delta.content);
+            }
+          }
+
+          main();
+          ```
+
+        </CodeGroup>
+
+          ```json {{ title: 'Response' }}
+          {"id":"e55b11e3-985b-4fbf-ba2e-5e81e6c100c2","choices":[{"delta":{"content":"Hello","role":null},"finish_reason":null,"index":0}],"created":1706718034,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
+
+          {"id":"010b3954-af7c-4360-9891-1d6c5e27da8c","choices":[{"delta":{"content":"!","role":null},"finish_reason":null,"index":0}],"created":1706718040,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
+
+          {"id":"7455343f-99bc-4d63-9d03-cc8e75fab29c","choices":[{"delta":{"content":" How","role":null},"finish_reason":null,"index":0}],"created":1706718044,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
+
+          {"id":"82f72e44-162d-4e21-93c6-387950a61c79","choices":[{"delta":{"content":" can","role":null},"finish_reason":null,"index":0}],"created":1706718049,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
+
+          {"id":"7d451531-d117-48b1-9e68-2554338e34ba","choices":[{"delta":{"content":" I","role":null},"finish_reason":null,"index":0}],"created":1706718053,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
+
+          {"id":"66fe6034-c97d-4c46-8c05-bf73804e557d","choices":[{"delta":{"content":" assist","role":null},"finish_reason":null,"index":0}],"created":1706718059,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
+
+          {"id":"56a260a8-f41b-4954-9b67-e6620fb32f0d","choices":[{"delta":{"content":" you","role":null},"finish_reason":null,"index":0}],"created":1706718063,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
+
+          {"id":"ccef46ce-ba8b-4ac8-8262-a66cb96832a5","choices":[{"delta":{"content":" today","role":null},"finish_reason":null,"index":0}],"created":1706718068,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
+
+          {"id":"0d2b9ba2-ab04-4aed-ad51-72a89acb3122","choices":[{"delta":{"content":"?","role":null},"finish_reason":null,"index":0}],"created":1706718069,"model":"main","system_fingerprint":"edgen-0.1.0","object":"text_completion"}
+          ```
+      </div>
+
+      [comment]: <> (Insert the next one, as if adding another child to the ButtonRow component)
+
+      <div> Hello </div>
+  </ButtonRow>
 
   </Col>
 </Row>

diff --git a/docs/src/components/ButtonRow.tsx b/docs/src/components/ButtonRow.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import clsx from 'clsx'
+import React, { useState } from 'react'
+import { Col } from './mdx'
+
+export function ButtonRow({
+    types,
+    children 
+}: {
+    types: string[]
+    children: React.ReactNode 
+}) {
+  const [currentType, setCurrentType] = useState<number>(0)
+
+  const onlyCurrent = (children: React.ReactNode ) => (
+    <div>
+      {React.Children.toArray(children).map((child, i) => i == currentType ? <div key={i}>{child}</div> : <div key={i}></div>)}
+    </div>
+  );
+
+  return (
+    <>
+        <div className='flex h-fit flex-col items-end'>
+            <ul className="flex w-fit list-none p-0.5 mt-6 mb-0.5 h-10 rounded-lg bg-yellow-400">
+                {types.map((t, i) => {
+                return (
+                    <li
+                        key={i}
+                        className={clsx(
+                            `${types[currentType] == t ? 'bg-yellow-400' : 'bg-yellow-100'}`,
+                            'flex h-full text-black justify-center items-center',
+                            'first:rounded-bl-lg first:rounded-tl-lg last:rounded-tr-lg last:rounded-br-lg',
+                            'm-0 px-4',
+                            'cursor-pointer'
+                        )}
+                        onClick={() => setCurrentType(i)}
+                        >
+                        <div className='w-fit h-fit'>
+                            {t}
+                        </div>
+                    </li>
+                )
+                })}
+            </ul>
+        </div>
+        <Col>
+            {onlyCurrent(children)}
+        </Col>
+    </>
+  )
+}
diff --git a/docs/src/components/Endpoints.tsx b/docs/src/components/Endpoints.tsx
@@ -103,7 +103,7 @@ function EndpointPattern({
         />
       </div>
       <motion.div
-        className="absolute inset-0 rounded-2xl bg-gradient-to-r from-[#F3D7AE] to-[#776942] to-[#EDE7D7] opacity-0 transition duration-300 group-hover:opacity-100 dark:from-[#776942]"
+        className="absolute inset-0 rounded-2xl bg-gradient-to-r from-[#F3D7AE] to-[#EDE7D7] opacity-0 transition duration-300 group-hover:opacity-100 dark:from-[#776942]"
         style={style}
       />
       <motion.div

diff --git a/docs/src/components/Heading.tsx b/docs/src/components/Heading.tsx
@@ -22,7 +22,7 @@ function AnchorIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   )
 }
 
-function Eyebrow({ tag, label }: { tag?: string; label?: string }) {
+export function Eyebrow({ tag, label }: { tag?: string; label?: string }) {
   if (!tag && !label) {
     return null
   }
@@ -115,3 +115,48 @@ export function Heading<Level extends 2 | 3>({
     </>
   )
 }
+
+export function HeadingNoEyebrow<Level extends 2 | 3>({
+  children,
+  tag,
+  label,
+  level,
+  anchor = true,
+  ...props
+}: React.ComponentPropsWithoutRef<`h${Level}`> & {
+  id: string
+  tag?: string
+  label?: string
+  level?: Level
+  anchor?: boolean
+}) {
+  level = level ?? (2 as Level)
+  let Component = `h${level}` as 'h2' | 'h3'
+  let ref = useRef<HTMLHeadingElement>(null)
+  let registerHeading = useSectionStore((s) => s.registerHeading)
+
+  let inView = useInView(ref, {
+    margin: `${remToPx(-3.5)}px 0px 0px 0px`,
+    amount: 'all',
+  })
+
+  useEffect(() => {
+    if (level === 2) {
+      registerHeading({ id: props.id, ref, offsetRem: tag || label ? 8 : 6 })
+    }
+  })
+
+  return (
+    <>
+      <Component
+        ref={ref}
+        className={tag || label ? 'mt-2 scroll-mt-32' : 'scroll-mt-24'}
+        {...props}
+      >
+        {<Anchor id={props.id} inView={inView}>
+            {children}
+          </Anchor>}
+      </Component>
+    </>
+  )
+}
diff --git a/docs/src/components/mdx.tsx b/docs/src/components/mdx.tsx
@@ -2,12 +2,15 @@ import Link from 'next/link'
 import clsx from 'clsx'
 
 import { Feedback } from '@/components/Feedback'
-import { Heading } from '@/components/Heading'
+import { Heading} from '@/components/Heading'
 import { Prose } from '@/components/Prose'
 
 export const a = Link
 export { Button } from '@/components/Button'
 export { CodeGroup, Code as code, Pre as pre } from '@/components/Code'
+export { ButtonRow } from '@/components/ButtonRow'
+
+export { Eyebrow, HeadingNoEyebrow } from '@/components/Heading'
 
 export function wrapper({ children }: { children: React.ReactNode }) {
   return (