Rohit/s3 en 2064 fix api key not showing (#29)

* fix api key bug * final fixes * fix scroll bar issue
Scale3-Labs · Apr 3, 2024 · 97b0341 · 97b0341
1 parent 4b1684a
commit 97b0341
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 35 deletions.
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>