Release (#35)

* Bug fix * signup bug fix * user invite * docs: add local setup instructions, cleanup files (#10) * Update README.md (#11) * Update README.md * Update README.md * Update README.md * Bugfix auth (#12) * Update README.md * Update favicon (#17) * Release 1.0.3 (#8) * Bug fix * signup bug fix * user invite * favicon * Adding pagination to traces (#16) * Adding pagination to traces * installing scroller * query function bug * fix * Bug fix pagination --------- Co-authored-by: Karthik Kalyanaraman <karthik@scale3labs.com> * Dylan/s3en 2060 adding more frontend pagination (#18) * Adding pagination to traces * installing scroller * bug fixes for trace pagination * adding delete prompt api * adding pagination to evaluate * adding pagination to evals * adding pagination to prompset, bug fixes * adding .env * fix --------- Co-authored-by: Karthik Kalyanaraman <karthik@scale3labs.com> * updating prompt dialog (#19) * Show API key warning message (#20) * Show API key warning message * Update instructions * Fix null dereference checks (#21) * adding check for missing table (#22) * adding check for missing table * adding docs button * Check empty table --------- Co-authored-by: Karthik Kalyanaraman <karthik@scale3labs.com> * Check length of data (#24) * flicker issue (#26) * Flicker issue (#27) * flicker issue * Fixes * Fix (#30) * Fix header (#32) * updating gitignore * Rohit/s3 en 2064 fix api key not showing (#29) * fix api key bug * final fixes * fix scroll bar issue --------- Co-authored-by: darshit-s3 <119623510+darshit-s3@users.noreply.github.com> Co-authored-by: Rohit Kadhe <113367036+rohit-kadhe@users.noreply.github.com> Co-authored-by: dylanzuber-scale3 <116033320+dylanzuber-scale3@users.noreply.github.com> Co-authored-by: dylan <dylan@scale3labs.com>
Scale3-Labs · Apr 3, 2024 · 189f35a · 189f35a
1 parent 23aea10
commit 189f35a
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 39 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -2,6 +2,7 @@ Dockerfile
 docker-compose.yml
 docker-compose.yaml
 .env
+.env.local
 node_modules/
 .next/
 .dockerignore

diff --git a/.gitignore b/.gitignore
@@ -27,7 +27,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*.local
+.env.local
 
 # vercel
 .vercel
@@ -40,5 +40,3 @@ next-env.d.ts
 cli/config*.ini
 cli/build/*
 cli/dist/*
-
-.env
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # [Langtrace](https://www.langtrace.ai)
 
-## Open Source & Open Telemetry(OTEL) Observability for LLM applications.
+## Open Source & Open Telemetry(OTEL) Observability for LLM applications
 
 ![Static Badge](https://img.shields.io/badge/License-AGPL--3.0-blue) ![Static Badge](https://img.shields.io/badge/npm_@langtrase/typescript--sdk-1.2.9-green) ![Static Badge](https://img.shields.io/badge/pip_langtrace--python--sdk-1.2.8-green) ![Static Badge](https://img.shields.io/badge/Development_status-Active-green)
 
@@ -26,22 +26,25 @@ To use the managed SaaS version of Langtrace, follow the steps below:
 4. In your application, install the Langtrace SDK and initialize it with the API key you generated in the step 3.
 5. The code for installing and setting up the SDK is shown below:
 
-### If your application is built using **typescript/javascript**:
+### If your application is built using **typescript/javascript**
 
 ``` typescript
 npm i @langtrase/typescript-sdk
 ```
+
 ``` typescript
-import * as Langtrace from '@langtrase/typescript-sdk // Must precede any llm module imports
+import * as Langtrace from '@langtrase/typescript-sdk' // Must precede any llm module imports
 Langtrace.init({ api_key: <your_api_key> })
 ```
+
 OR
+
 ``` typescript
-import * as Langtrace from '@langtrase/typescript-sdk // Must precede any llm module imports
+import * as Langtrace from '@langtrase/typescript-sdk' // Must precede any llm module imports
 LangTrace.init() // LANGTRACE_API_KEY as an ENVIRONMENT variable
 ```
 
-### If your application is built using **python**:
+### If your application is built using **python**
 
 ```
 pip install langtrace-python-sdk
@@ -118,6 +121,7 @@ The following are some commands that may come handy during setup and debugging.
   ```bash
   docker exec -it langtrace-clickhouse clickhouse-client
   ```
+
 </details>
 
 <details>
@@ -126,10 +130,13 @@ The following are some commands that may come handy during setup and debugging.
   ```bash
   docker logs langtrace
   ```
+
   If you want to follow the logs
+
   ```bash
   docker logs -f langtrace
   ```
+
 </details>
 
 <details>
@@ -138,6 +145,7 @@ The following are some commands that may come handy during setup and debugging.
   ```bash
   docker exec -it langtrace npm run create-tables
   ```
+
 </details>
 
 #### Common issues for local setup
@@ -149,6 +157,7 @@ The following are some commands that may come handy during setup and debugging.
   ```bash
   docker exec -it langtrace npm run create-tables
   ```
+
 </details>
 
 <details>
@@ -158,6 +167,7 @@ The following are some commands that may come handy during setup and debugging.
   ```bash
   docker exec -it langtrace npm run create-tables
   ```
+
 </details>
 
 <details>
@@ -218,7 +228,7 @@ We welcome contributions to this project. To get started, fork this repository a
 
 ## Security
 
-To report security vulnerabilites, email us at security@scale3labs.com. You can read more on security [here](https://github.com/Scale3-Labs/langtrace/blob/development/SECURITY.md).
+To report security vulnerabilites, email us at <security@scale3labs.com>. You can read more on security [here](https://github.com/Scale3-Labs/langtrace/blob/development/SECURITY.md).
 
 ---
 

diff --git a/app/globals.css b/app/globals.css
@@ -1,77 +1,107 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
+  .overflow-x-scroll {
+    overflow-x: auto !important;
+  }
+
+  .overflow-y-scroll {
+    overflow-y: auto !important;
+  }
+
+  html.dark ::-webkit-scrollbar-thumb {
+    background-color: rgb(65, 65, 72);
+  }
+
+  html ::-webkit-scrollbar-thumb {
+    background-color: rgb(220 220 220);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    border-radius: 9999px;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent !important;
+    padding: 20px;
+  }
+
+  .overflow-x-scroll {
+    overflow-y: auto !important;
+  }
+
   :root {
     --background: 0 0% 100%;
     --foreground: 224 71.4% 4.1%;
 
     --card: 0 0% 100%;
     --card-foreground: 224 71.4% 4.1%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 224 71.4% 4.1%;
- 
+
     --primary: 220.9 39.3% 11%;
     --primary-foreground: 210 20% 98%;
- 
+
     --secondary: 220 14.3% 95.9%;
     --secondary-foreground: 220.9 39.3% 11%;
- 
+
     --muted: 220 14.3% 95.9%;
     --muted-foreground: 220 8.9% 46.1%;
- 
+
     --accent: 220 14.3% 95.9%;
     --accent-foreground: 220.9 39.3% 11%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 20% 98%;
 
     --border: 220 13% 91%;
     --input: 220 13% 91%;
     --ring: 224 71.4% 4.1%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 224 71.4% 4.1%;
     --foreground: 210 20% 98%;
- 
+
     --card: 224 71.4% 4.1%;
     --card-foreground: 210 20% 98%;
- 
+
     --popover: 224 71.4% 4.1%;
     --popover-foreground: 210 20% 98%;
- 
+
     --primary: 210 20% 98%;
     --primary-foreground: 220.9 39.3% 11%;
- 
+
     --secondary: 215 27.9% 16.9%;
     --secondary-foreground: 210 20% 98%;
- 
+
     --muted: 215 27.9% 16.9%;
     --muted-foreground: 217.9 10.6% 64.9%;
- 
+
     --accent: 215 27.9% 16.9%;
     --accent-foreground: 210 20% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 20% 98%;
- 
+
     --border: 215 27.9% 16.9%;
     --input: 215 27.9% 16.9%;
     --ring: 216 12.2% 83.9%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }
-}
-
+}
diff --git a/components/shared/api-key.tsx b/components/shared/api-key.tsx
@@ -12,9 +12,10 @@ import { ClipboardIcon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 
-export default function GenerateApiKey({ projectId }: { projectId: string }) {
+export default function GenerateApiKey({ projectId, onApiKeyGenerated }: { projectId: string; onApiKeyGenerated?: (apiKey: string) => void }) {
   const [busy, setBusy] = useState(false);
   const [apiKey, setApiKey] = useState("");
+
   return (
     <Dialog>
       <DialogTrigger>
@@ -63,6 +64,7 @@ export default function GenerateApiKey({ projectId }: { projectId: string }) {
                 });
                 const result = await response.json();
                 setApiKey(result.data.apiKey);
+                onApiKeyGenerated?.(result.data.apiKey);
                 toast("Copy your API Key!", {
                   description:
                     "Please copy your API key. It will not be shown again.",

diff --git a/components/shared/setup-instructions.tsx b/components/shared/setup-instructions.tsx
@@ -9,7 +9,11 @@ export default function SetupInstructions({
   project_id: string;
 }) {
   const [sdk, setSdk] = useState("typescript");
+  const [apiKey, setApiKey] = useState('<LANGTRACE_API_KEY>');
 
+  const handleApiKeyGenerated = (newApiKey: string) => {
+    setApiKey(newApiKey);
+  };
   const copyToClipboard = (code: string) => {
     navigator.clipboard.writeText(code);
     return toast.success("Copied to clipboard");
@@ -55,37 +59,38 @@ export default function SetupInstructions({
         <p className="text-sm text-muted-foreground">
           2. Generate and copy your API key.
         </p>
-        <GenerateApiKey projectId={project_id} />
+        <GenerateApiKey projectId={project_id} onApiKeyGenerated={handleApiKeyGenerated}/>
       </div>
       <div className="flex flex-col gap-3">
         <p className="text-sm text-muted-foreground">
-          3. Initialize the SDK with the following code snippet. Set the env
-          var, LANGTRACE_API_KEY to the API key you generated.
+          3. Initialize the SDK with the following code snippet
         </p>
         {sdk === "typescript" && (
           <pre
             className="text-xs p-2 rounded-md bg-muted select-all selection:bg-orange-400 dark:selection:bg-orange-600"
             onClick={() => {
               copyToClipboard(
-                "import { init } from '@langtrace-init/init';\n\ninit({ api_key: <api-key-from-step-2> });"
+                `//Must precede any llm module imports\n\nimport * as Langtrace from '@langtrase/typescript-sdk'\n\nLangtrace.init({ api_key: '${apiKey ?? '<LANGTRACE_API_KEY>'}' })`
               );
             }}
           >
-            {"import { init } from '@langtrace-init/init';\n\n"}
-            {"init({ api_key: <api-key-from-step-2> });"}
+            {"// Must precede any llm module imports\n\n"}
+            {"import * as Langtrace from '@langtrase/typescript-sdk'\n\n"}
+            {`Langtrace.init({ api_key: '${apiKey ?? '<LANGTRACE_API_KEY>'}' })`}
           </pre>
         )}
         {sdk === "python" && (
           <pre
             className="text-xs p-2 rounded-md bg-muted select-all selection:bg-orange-400 dark:selection:bg-orange-600"
             onClick={() => {
               copyToClipboard(
-                "from langtrace_python_sdk import langtrace\n\nlangtrace.init(api_key=<api-key-from-step-2>)"
+                `# Must precede any llm module imports\n\nfrom langtrace_python_sdk import langtrace\n\nlangtrace.init({ api_key = '${apiKey ?? '<LANGTRACE_API_KEY>'}')`
               );
             }}
           >
+            {"# Must precede any llm module imports\n\n"}
             {"from langtrace_python_sdk import langtrace\n\n"}
-            {"langtrace.init(api_key=<api-key-from-step-2>)"}
+            {`langtrace.init({ api_key = '${apiKey ?? '<LANGTRACE_API_KEY>'}')`}
           </pre>
         )}
       </div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
 		"crypto": "^1.0.1",
 		"d3-dsv": "^2.0.0",
 		"date-fns": "^3.3.1",
+		"env-cmd": "^10.1.0",
 		"f": "^1.4.0",
 		"framer-motion": "^11.0.5",
 		"fs": "^0.0.1-security",
@@ -107,4 +108,4 @@
 	"browser": {
 		"crypto": false
 	}
-}
+}