From e5506188d0d57fd97cc2b25d48c327ccbe0f08c6 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Mon, 13 Jan 2025 12:12:42 -0800
Subject: [PATCH] Added api key field to agent block

---
 .../sub-block/components/short-input.tsx      | 23 +++++++++++++++++--
 .../workflow-block/sub-block/sub-block.tsx    |  5 +++-
 app/w/components/blocks/configs/agent.ts      |  9 +++++++-
 app/w/components/blocks/types/block.ts        |  2 ++
 4 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/app/w/components/blocks/components/workflow-block/sub-block/components/short-input.tsx b/app/w/components/blocks/components/workflow-block/sub-block/components/short-input.tsx
index 4781fb960..5a9ed828c 100644
--- a/app/w/components/blocks/components/workflow-block/sub-block/components/short-input.tsx
+++ b/app/w/components/blocks/components/workflow-block/sub-block/components/short-input.tsx
@@ -1,5 +1,24 @@
 import { Input } from '@/components/ui/input'
+import { useState } from 'react'
 
-export function ShortInput() {
-  return <Input className="w-full" />
+interface ShortInputProps {
+  placeholder: string
+  password?: boolean
+}
+
+export function ShortInput({ placeholder, password }: ShortInputProps) {
+  const [isFocused, setIsFocused] = useState(false)
+  const [value, setValue] = useState('')
+
+  return (
+    <Input
+      className="w-full"
+      placeholder={placeholder}
+      type={password && !isFocused ? 'password' : 'text'}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+    />
+  )
 }
diff --git a/app/w/components/blocks/components/workflow-block/sub-block/sub-block.tsx b/app/w/components/blocks/components/workflow-block/sub-block/sub-block.tsx
index f37751bd3..a49b5af0a 100644
--- a/app/w/components/blocks/components/workflow-block/sub-block/sub-block.tsx
+++ b/app/w/components/blocks/components/workflow-block/sub-block/sub-block.tsx
@@ -19,7 +19,10 @@ export function SubBlock({ config }: SubBlockProps) {
   const renderInput = () => {
     switch (config.type) {
       case 'short-input':
-        return <ShortInput />
+        return <ShortInput 
+          placeholder={config.placeholder ?? ''} 
+          password={config.password}
+        />
       case 'long-input':
         return <LongInput />
       case 'dropdown':
diff --git a/app/w/components/blocks/configs/agent.ts b/app/w/components/blocks/configs/agent.ts
index 6d4348056..1ab93b589 100644
--- a/app/w/components/blocks/configs/agent.ts
+++ b/app/w/components/blocks/configs/agent.ts
@@ -29,7 +29,7 @@ export const AgentBlock: BlockConfig = {
         title: 'Model',
         type: 'dropdown',
         layout: 'half',
-        options: ['GPT-4o', 'Gemini 2.0', 'Gemini 1.5 Pro', 'DeepSeek V3', 'Grok 2'],
+        options: ['GPT-4o', 'Gemini 2.0', 'Claude 3.5 Sonnet', 'DeepSeek V3', 'Grok 2'],
       },
       {
         title: 'Temperature',
@@ -38,6 +38,13 @@ export const AgentBlock: BlockConfig = {
         min: 0,
         max: 2,
       },
+      {
+        title: "API Key",
+        type: "short-input",
+        layout: "full",
+        placeholder: "Enter your API key",
+        password: true
+      }
     ],
   },
 }
\ No newline at end of file
diff --git a/app/w/components/blocks/types/block.ts b/app/w/components/blocks/types/block.ts
index fe33ee91a..76911b587 100644
--- a/app/w/components/blocks/types/block.ts
+++ b/app/w/components/blocks/types/block.ts
@@ -15,6 +15,8 @@ export interface SubBlockConfig {
   max?: number
   layout?: SubBlockLayout
   columns?: string[]
+  placeholder?: string
+  password?: boolean
 }
 
 export interface BlockConfig {