Add tabs for choosing platform in Redis Instructions

docs/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

docs/package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@tanstack/react-table": "^8.16.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

docs/pages/index.mdx

@@ -4,6 +4,8 @@ import { Button } from "../components/ui/button"
 import { MoveRight } from "lucide-react"
 import { Accordion, AccordionItem, AccordionContent, AccordionTrigger } from "../components/ui/accordion"
 import { Steps } from 'nextra/components'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs"
+
 
 
 # Sotopia - Getting Started
@@ -103,27 +105,46 @@ Redis stack is a required dependency for using Sotopia. There are two ways to se
         <AccordionContent>
         <Steps>
         ### Download the Redis stack
-        ```bash
-        # if you are using Ubunutu 20.04
-        curl -fsSL https://packages.redis.io/redis-stack/redis-stack-server-7.2.0-v10.focal.x86_64.tar.gz -o redis-stack-server.tar.gz
-        tar -xvzf redis-stack-server.tar.gz
-        export PATH=$(pwd)/redis-stack-server-7.2.0-v10/bin:$PATH
-        # if you are using Ubunutu 22.04, please do an extra step
-        wget http://nz2.archive.ubuntu.com/ubuntu/pool/main/o/openssl/libssl1.1_1.1.1f-1ubuntu2.22_amd64.deb
-        sudo dpkg -i libssl1.1_1.1.1f-1ubuntu2.22_amd64.deb
-        # if you are using macOs
-        brew tap redis-stack/redis-stack
-        brew install redis-stack
-        ```
+        <Tabs defaultValue="ubuntu20" className="w-full mt-3 bg-inherit">
+          <TabsList>
+            <TabsTrigger value="ubuntu20">Ubuntu 20.04</TabsTrigger>
+            <TabsTrigger value="ubuntu22">Ubuntu 22.04</TabsTrigger>
+            <TabsTrigger value="mac">Mac OS</TabsTrigger>
+          </TabsList>
+          <TabsContent value="ubuntu20">
+          ```bash
+          curl -fsSL https://packages.redis.io/redis-stack/redis-stack-server-7.2.0-v10.focal.x86_64.tar.gz -o redis-stack-server.tar.gz
+          tar -xvzf redis-stack-server.tar.gz
+          export PATH=$(pwd)/redis-stack-server-7.2.0-v10/bin:$PATH
+          ```
+          </TabsContent>
+          <TabsContent value="ubuntu22">
+          ```bash
+          curl -fsSL https://packages.redis.io/redis-stack/redis-stack-server-7.2.0-v10.focal.x86_64.tar.gz -o redis-stack-server.tar.gz
+          tar -xvzf redis-stack-server.tar.gz
+          export PATH=$(pwd)/redis-stack-server-7.2.0-v10/bin:$PATH
+          wget http://nz2.archive.ubuntu.com/ubuntu/pool/main/o/openssl/libssl1.1_1.1.1f-1ubuntu2.22_amd64.deb
+          sudo dpkg -i libssl1.1_1.1.1f-1ubuntu2.22_amd64.deb
+          ```
+          </TabsContent>
+          <TabsContent value="mac">
+          ```bash
+          brew tap redis-stack/redis-stack
+          brew install redis-stack
+          ```
+          </TabsContent>
+        </Tabs>
+
 
         ### Start the server
         ```bash
-        ./redis-stack-server-7.2.0-v10/bin/redis-stack-server --daemonize yes
+        redis-stack-server --daemonize yes
         ```
 
         For other platforms, please check the [instruction](https://redis.io/docs/latest/operate/oss_and_stack/install/install-stack/).
 
-        ### The `REDIS_OM_URL` need to be set before loading and saving agents:
+        ### Set the environment variable:
+        The `REDIS_OM_URL` need to be set before loading and saving agents
         ```bash
         conda env config vars set REDIS_OM_URL="redis://user:password@host:port"
         ```

docs/tailwind.config.ts

@@ -9,6 +9,7 @@ const config = {
     './src/**/*.{ts,tsx}',
 	],
   prefix: "",
+  safelist: ["dark"],
   theme: {
     container: {
       center: true,