rename tabs

docs/docs.trychroma.com/README.md

@@ -28,7 +28,7 @@ It also incldues [Shadcn](https://ui.shadcn.com/) with [Tailwind](https://tailwi
 - Dark/Light Mode
 - Responsive
 - Global and Local state management with localstorage persistence
-- MarkdocTabs
+- Tabs
 - Code styling with Prism
 - Toasts
 

docs/docs.trychroma.com/components/markdoc/tabbed-code-block.tsx

@@ -4,7 +4,7 @@ import { TabsContent, TabsList } from "@/components/ui/tabs";
 import { tabLabelStyle } from "@/components/markdoc/code-block-header";
 import { capitalize, cn } from "@/lib/utils";
 import CodeBlock from "@/components/markdoc/code-block";
-import { TabProps, TabsTrigger } from "@/components/markdoc/markdoc-tabs";
+import { TabProps, TabsTrigger } from "@/components/markdoc/tabs";
 import CodeTabs from "@/components/markdoc/code-tab";
 
 const TabbedCodeBlock: React.FC<{

docs/docs.trychroma.com/components/markdoc/tabbed-use-case-code-block.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from "react";
 import { tabLabelStyle } from "@/components/markdoc/code-block-header";
 import { capitalize, cn } from "@/lib/utils";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { TabProps } from "@/components/markdoc/markdoc-tabs";
+import { TabProps } from "@/components/markdoc/tabs";
 import CodeBlock from "@/components/markdoc/code-block";
 import CopyButton from "@/components/markdoc/copy-button";
 

docs/docs.trychroma.com/components/markdoc/markdoc-tabs.tsx → docs/docs.trychroma.com/components/markdoc/tabs.tsx

@@ -13,13 +13,6 @@ import AppContext from "@/context/app-context";
 import CodeBlock from "@/components/markdoc/code-block";
 import { Playfair_Display } from "next/font/google";
 
-export const playfairDisplay = Playfair_Display({
-  subsets: ["latin"],
-  display: "swap",
-  weight: "500",
-  variable: "--font-playfair-display",
-});
-
 export interface TabProps {
   label: string;
   children: React.ReactElement<{ content: string; showHeader: boolean }>;
@@ -49,7 +42,7 @@ const Tab: React.FC<TabProps> = ({ children }) => {
   return <div>{children}</div>;
 };
 
-export const MarkdocTabs: React.FC<{ children: ReactElement<TabProps>[] }> = ({
+export const Tabs: React.FC<{ children: ReactElement<TabProps>[] }> = ({
   children,
 }) => {
   const { language } = useContext(AppContext);
@@ -67,8 +60,7 @@ export const MarkdocTabs: React.FC<{ children: ReactElement<TabProps>[] }> = ({
               value={tab.props.label}
               className={cn(
                 tabLabelStyle,
-                playfairDisplay.className,
-                "text-sm tracking-normal dark:data-[state=active]:bg-transparent data-[state=active]:border-b data-[state=active]:text-gray-900 dark:data-[state=active]:text-gray-200 data-[state=active]:border-gray-900 dark:data-[state=active]:border-gray-200",
+                "text-sm font-mono tracking-normal dark:data-[state=active]:bg-transparent data-[state=active]:border-b data-[state=active]:text-gray-900 dark:data-[state=active]:text-gray-200 data-[state=active]:border-gray-900 dark:data-[state=active]:border-gray-200",
               )}
             >
               {capitalize(tab.props.label)}

docs/docs.trychroma.com/components/sidebar/menu-item.tsx

@@ -20,20 +20,22 @@ const MenuItem: React.FC<{ section: AppSection; active: boolean }> = ({
         className={`flex items-center gap-2 text-gray-700/80 cursor-pointer ${!section.comingSoon && "hover:text-gray-800"} dark:text-gray-400/80 dark:hover:text-gray-300`}
       >
         <div
-          className={`flex items-center justify-center p-1.5 rounded-lg ${active && "border border-chroma-orange bg-chroma-orange/10 text-chroma-orange"}`}
+          className={`flex items-center justify-center p-1.5 rounded-lg ${active && "ring-[1px] ring-chroma-orange bg-chroma-orange/10 text-chroma-orange"}`}
         >
           <Icon className="w-5 h-5" />
         </div>
-        <p
-          className={`font-semibold select-none ${active && "text-chroma-orange"}`}
-        >
-          {section.name}
-        </p>
-        {section.comingSoon && (
-          <div className="inline-flex text-xs px-2 py-0.5 bg-gray-800 rounded-md text-gray-200">
-            Coming Soon
-          </div>
-        )}
+        <div className="relative">
+          <p
+            className={`font-semibold select-none ${active && "text-chroma-orange"}`}
+          >
+            {section.name}
+          </p>
+          {section.comingSoon && (
+            <div className="absolute text-xs px-2 py-0.5 bg-gray-800 rounded-md text-gray-200">
+              Coming Soon
+            </div>
+          )}
+        </div>
       </div>
     </Link>
   );

docs/docs.trychroma.com/components/sidebar/page-index.tsx

@@ -17,7 +17,9 @@ const PageIndex: React.FC<{
   return (
     <div className="select-none cursor-pointer">
       {name && (
-        <p className={`${playfairDisplay.className} mb-2 tracking-wide`}>
+        <p
+          className={`${playfairDisplay.className} mb-2 tracking-wide cursor-default`}
+        >
           {name}
         </p>
       )}

docs/docs.trychroma.com/components/sidebar/sidebar.tsx

@@ -52,7 +52,7 @@ const Sidebar: React.FC<{ path: string[]; mobile?: boolean }> = ({
       className={`h-full xl:ml-[calc((100vw-1256px)/2)] ${!mobile && "hidden md:block"}`}
     >
       <div className="flex flex-col h-full w-64 p-5 border-r-[1px] flex-shrink-0 dark:border-gray-700">
-        <div className="flex flex-col gap-1 pb-10">
+        <div className="flex flex-col gap-y-1.5 pb-10">
           {sidebarConfig.map((section) => (
             <MenuItem
               key={section.id}

docs/docs.trychroma.com/markdoc/config.ts

@@ -3,7 +3,7 @@ import React from "react";
 import InlineCode from "@/components/markdoc/inline-code";
 import CodeBlock from "@/components/markdoc/code-block";
 import TabbedUseCaseCodeBlock from "@/components/markdoc/tabbed-use-case-code-block";
-import Tab, { MarkdocTabs } from "@/components/markdoc/markdoc-tabs";
+import Tab, { Tabs } from "@/components/markdoc/tabs";
 import {
   Table,
   TableHeader,
@@ -117,7 +117,7 @@ const markdocConfig: MarkDocConfig = {
     TabbedCodeBlock,
     TabbedUseCaseCodeBlock,
     Tab,
-    Tabs: MarkdocTabs,
+    Tabs: Tabs,
     Table,
     TableHeader,
     TableBody,

docs/docs.trychroma.com/markdoc/content/docs/collections/create-get-delete.md

@@ -102,21 +102,25 @@ await client.deleteCollection(collection); // Delete a collection and all associ
 
 Collections have a few useful convenience methods.
 
+* `peek()` - returns a list of the first 10 items in the collection.
+* `count()` - returns the number of items in the collection.
+* `modify()` - rename the collection
+
 {% TabbedCodeBlock %}
 
 {% Tab label="python" %}
 ```python
-collection.peek() # returns a list of the first 10 items in the collection
-collection.count() # returns the number of items in the collection
-collection.modify(name="new_name") # Rename the collection
+collection.peek() 
+collection.count() 
+collection.modify(name="new_name")
 ```
 {% /Tab %}
 
 {% Tab label="typescript" %}
 ```typescript
-await collection.peek(); // returns a list of the first 10 items in the collection
-await collection.count(); // returns the number of items in the collection
-await collection.modify({ name: "new_name" }) // Rename the collection
+await collection.peek();
+await collection.count();
+await collection.modify({ name: "new_name" })
 ```
 {% /Tab %}
 

docs/docs.trychroma.com/markdoc/content/docs/overview/getting-started.md

@@ -13,7 +13,7 @@ Chroma is an AI-native open-source vector database. It comes with everything you
 
 ### 1. Install
 
-{% MarkdocTabs %}
+{% Tabs %}
 
 {% Tab label="python" %}
 
@@ -47,19 +47,19 @@ pnpm install chromadb chromadb-default-embed
 
 {% /TabbedUseCaseCodeBlock %}
 
-Install chroma via `pip` to easily run the backend server. ([Docker](../../production/containers/docker) also available)
+Install chroma via `pip` to easily run the backend server. Here are [instructions](https://pip.pypa.io/en/stable/installation/) for installing and running `pip`. Alternatively, you can also run Chroma in a [Docker](../../production/containers/docker) container.
 
 ```terminal
 pip install chromadb
 ```
 
 {% /Tab %}
 
-{% /MarkdocTabs %}
+{% /Tabs %}
 
 ### 2. Create a Chroma Client
 
-{% MarkdocTabs %}
+{% Tabs %}
 
 {% Tab label="python" %}
 ```python
@@ -110,7 +110,7 @@ const client = new ChromaClient();
 
 {% /Tab %}
 
-{% /MarkdocTabs %}
+{% /Tabs %}
 
 ### 3. Create a collection
 
@@ -136,7 +136,7 @@ const collection = await client.createCollection({
 
 ### 4. Add some text documents to the collection
 
-Chroma will store your text and handle embedding and indexing automatically. You can also customize the embedding model.
+Chroma will store your text and handle embedding and indexing automatically. You can also customize the embedding model. You must provide unique string IDs for your documents.
 
 {% TabbedCodeBlock %}
 
@@ -308,6 +308,8 @@ console.log(results);
 
 ## Next steps
 
+In this guide we used Chroma's [ephemeral client](../run-chroma/ephemeral-client) for simplicity. It starts a Chroma server in-memory, so any data you ingest will be lost when your program terminates. You can use the [persistent client](../run-chroma/persistent-client) or run Chroma in [client-server mode](../run-chroma/client-server) if you need data persistence.
+
 - Learn how to [Deploy Chroma](../../production/deployment) to a server
 - Join Chroma's [Discord Community](https://discord.com/invite/MMeYNTmh3x) to ask questions and get help
 - Follow Chroma on [Twitter (@trychroma)](https://twitter.com/trychroma) for updates

docs/docs.trychroma.com/markdoc/content/docs/overview/roadmap.md

@@ -10,11 +10,6 @@
 
 # Roadmap
 
-
-{% note type="default" title="Last Updated" %}
-`May 20, 2024`
-{% /note %}
-
 The goal of this doc is to align *core* and *community* efforts for the project and to share what's in store for this year!
 
 **Sections**

docs/docs.trychroma.com/markdoc/content/docs/overview/telemetry.md

@@ -12,7 +12,7 @@ If you prefer to opt out of telemetry, you can do this in two ways.
 
 #### In Client Code
 
-{% MarkdocTabs %}
+{% Tabs %}
 
 {% Tab label="python" %}
 
@@ -33,7 +33,7 @@ Disable telemetry on you Chroma server (see next section).
 
 {% /Tab %}
 
-{% /MarkdocTabs %}
+{% /Tabs %}
 
 #### In Chroma's Backend Using Environment Variables
 

docs/docs.trychroma.com/markdoc/content/docs/run-chroma/client-server.md

@@ -8,7 +8,7 @@ To start the Chroma server, run the following command:
 chroma run --path /db_path
 ```
 
-{% MarkdocTabs %}
+{% Tabs %}
 
 {% Tab label="python" %}
 
@@ -56,4 +56,4 @@ const client = new ChromaClient();
 
 {% /Tab %}
 
-{% /MarkdocTabs %}
+{% /Tabs %}

docs/docs.trychroma.com/markdoc/content/docs/run-chroma/ephemeral-client.md

@@ -8,4 +8,6 @@ import chromadb
 client = chromadb.Client()
 ```
 
-This is a great tool for experimenting with different embedding functions and retrieval techniques in a Python notebook, for example. 
+The `Client()` method starts a Chroma server in-memory and also returns a client with which you can connect to it.
+
+This is a great tool for experimenting with different embedding functions and retrieval techniques in a Python notebook, for example. If you don't need data persistence, the ephemeral client is a good choice for getting up and running with Chroma.

docs/docs.trychroma.com/markdoc/content/docs/run-chroma/persistent-client.md

@@ -1,6 +1,6 @@
 # Persistent Client
 
-{% MarkdocTabs %}
+{% Tabs %}
 
 {% Tab label="python" %}
 
@@ -14,7 +14,7 @@ import chromadb
 client = chromadb.PersistentClient(path="/path/to/save/to")
 ```
 
-The `path` is where Chroma will store its database files on disk, and load them on start.
+The `path` is where Chroma will store its database files on disk, and load them on start. If you don't provide a path, the default is `.chroma`
 
 {% /Tab %}
 
@@ -34,7 +34,7 @@ And run the server using our CLI:
 chroma run --path ./getting-started 
 ```
 
-The `path` is where Chroma will store its database files on disk, and load them on start.
+The `path` is where Chroma will store its database files on disk, and load them on start. The default is `.chroma`.
 
 Alternatively, you can also use our official Docker image:
 
@@ -55,23 +55,26 @@ See [Running Chroma in client-server mode](../client-server-mode) for more.
 
 {% /Tab %}
 
-{% /MarkdocTabs %}
+{% /Tabs %}
 
 The client object has a few useful convenience methods.
 
+* `hearthbeat()` - returns a nanosecond heartbeat. Useful for making sure the client remains connected.
+* `reset()` - empties and completely resets the database. ⚠️ This is destructive and not reversible.
+
 {% TabbedCodeBlock %}
 
 {% Tab label="python" %}
 ```python
-client.heartbeat() # returns a nanosecond heartbeat. Useful for making sure the client remains connected.
-client.reset() # Empties and completely resets the database. ⚠️ This is destructive and not reversible.
+client.heartbeat()
+client.reset()
 ```
 {% /Tab %}
 
 {% Tab label="typescript" %}
 ```typescript
-await client.heartbeat(); // returns a nanosecond heartbeat. Useful for making sure the client remains connected.
-await client.reset(); // Empties and completely resets the database. ⚠️ This is destructive and not reversible.
+await client.heartbeat();
+await client.reset();
 ```
 {% /Tab %}
 

docs/docs.trychroma.com/markdoc/content/docs/run-chroma/python-http-client.md

@@ -1,8 +1,22 @@
 # The Python HTTP-Only Client
 
-If you are running Chroma in client-server mode, you may not need the full Chroma library. Instead, you can use the lightweight client-only library.
+If you are running Chroma in client-server mode, where you run a Chroma server and client on separate machines, you may not need the full Chroma package where you run your client. Instead, you can use the lightweight client-only library.
 In this case, you can install the `chromadb-client` package. This package is a lightweight HTTP client for the server with a minimal dependency footprint.
 
+On your server, install chroma with
+
+```terminal
+pip install chromadb
+```
+
+And run a Chroma server:
+
+```terminal
+chroma run --path [path/to/persist/data]
+```
+
+Then, on your client side, install the HTTP-only client: 
+
 ```terminal
 pip install chromadb-client
 ```

docs/docs.trychroma.com/markdoc/content/integrations/embedding-models/cohere.md

@@ -7,7 +7,7 @@ name: 'Cohere'
 
 Chroma also provides a convenient wrapper around Cohere's embedding API. This embedding function runs remotely on Cohere’s servers, and requires an API key. You can get an API key by signing up for an account at [Cohere](https://dashboard.cohere.ai/welcome/register).
 
-{% MarkdocTabs %}
+{% Tabs %}
 {% Tab label="python" %}
 
 This embedding function relies on the `cohere` python package, which you can install with `pip install cohere`.
@@ -37,7 +37,7 @@ const collectionGet = await client.getCollection({name:"name", embeddingFunction
 
 {% /Tab %}
 
-{% /MarkdocTabs %}
+{% /Tabs %}
 
 You can pass in an optional `model_name` argument, which lets you choose which Cohere embeddings model to use. By default, Chroma uses `large` model. You can see the available models under `Get embeddings` section [here](https://docs.cohere.ai/reference/embed).
 

docs/docs.trychroma.com/markdoc/content/integrations/embedding-models/google-gemini.md

@@ -9,7 +9,7 @@ Chroma provides a convenient wrapper around Google's Generative AI embedding API
 
 You can get an API key by signing up for an account at [Google MakerSuite](https://makersuite.google.com/).
 
-{% MarkdocTabs %}
+{% Tabs %}
 
 {% Tab label="python" %}
 
@@ -64,4 +64,4 @@ For more info - please visit the [official Google JS docs](https://ai.google.dev
 
 {% /Tab %}
 
-{% /MarkdocTabs %}
+{% /Tabs %}