From 000a58e833ce98ca4167a88c513e04b95f7e1db3 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Wed, 15 Jan 2025 14:39:05 -0800
Subject: [PATCH] Added placeholders for long inputs and for agent and api

---
 .../sub-block/components/long-input.tsx       | 19 +++++++++++++++++--
 .../sub-block/components/short-input.tsx      |  2 +-
 .../workflow-block/sub-block/sub-block.tsx    |  2 +-
 blocks/configs/agent.ts                       |  2 ++
 blocks/configs/api.ts                         |  1 +
 5 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/app/w/components/workflow-block/sub-block/components/long-input.tsx b/app/w/components/workflow-block/sub-block/components/long-input.tsx
index a7911a61d..c4f6f5eae 100644
--- a/app/w/components/workflow-block/sub-block/components/long-input.tsx
+++ b/app/w/components/workflow-block/sub-block/components/long-input.tsx
@@ -1,5 +1,20 @@
 import { Textarea } from '@/components/ui/textarea'
+import { useState } from 'react'
 
-export function LongInput() {
-  return <Textarea className="w-full resize-none" rows={3} />
+interface LongInputProps {
+  placeholder?: string
+}
+
+export function LongInput({ placeholder }: LongInputProps) {
+  const [value, setValue] = useState('')
+
+  return (
+    <Textarea
+      className="w-full resize-none placeholder:text-muted-foreground/50"
+      rows={3}
+      placeholder={placeholder ?? ''}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  )
 }
diff --git a/app/w/components/workflow-block/sub-block/components/short-input.tsx b/app/w/components/workflow-block/sub-block/components/short-input.tsx
index 4358ce040..e7f18751a 100644
--- a/app/w/components/workflow-block/sub-block/components/short-input.tsx
+++ b/app/w/components/workflow-block/sub-block/components/short-input.tsx
@@ -12,7 +12,7 @@ export function ShortInput({ placeholder, password }: ShortInputProps) {
 
   return (
     <Input
-      className="w-full"
+      className="w-full placeholder:text-muted-foreground/50"
       placeholder={placeholder ?? ''}
       type={password && !isFocused ? 'password' : 'text'}
       value={value}
diff --git a/app/w/components/workflow-block/sub-block/sub-block.tsx b/app/w/components/workflow-block/sub-block/sub-block.tsx
index 12598bbab..5e89d0113 100644
--- a/app/w/components/workflow-block/sub-block/sub-block.tsx
+++ b/app/w/components/workflow-block/sub-block/sub-block.tsx
@@ -26,7 +26,7 @@ export function SubBlock({ config }: SubBlockProps) {
           />
         )
       case 'long-input':
-        return <LongInput />
+        return <LongInput placeholder={config.placeholder} />
       case 'dropdown':
         return (
           <div onMouseDown={handleMouseDown}>
diff --git a/blocks/configs/agent.ts b/blocks/configs/agent.ts
index 2f95fd568..ce7dcada4 100644
--- a/blocks/configs/agent.ts
+++ b/blocks/configs/agent.ts
@@ -24,11 +24,13 @@ export const AgentBlock: BlockConfig = {
         title: 'System Prompt',
         type: 'long-input',
         layout: 'full',
+        placeholder: 'Enter prompt',
       },
       {
         title: 'Context',
         type: 'short-input',
         layout: 'full',
+        placeholder: 'Enter text',
       },
       {
         title: 'Model',
diff --git a/blocks/configs/api.ts b/blocks/configs/api.ts
index 999e666f6..16a74e498 100644
--- a/blocks/configs/api.ts
+++ b/blocks/configs/api.ts
@@ -26,6 +26,7 @@ export const ApiBlock: BlockConfig = {
         title: 'URL',
         type: 'short-input',
         layout: 'full',
+        placeholder: 'Enter URL',
       },
       {
         title: 'Method',