Skip to content

Commit

Permalink
feat(ui): Improve subtitles + field info
Browse files Browse the repository at this point in the history
  • Loading branch information
@daryllimyt
daryllimyt committed Mar 24, 2024
1 parent 1dfae89 commit c7d8e5e
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 28 deletions.
101 changes: 84 additions & 17 deletions frontend/src/components/forms/action-schemas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,9 @@ export type ActionFieldType = "input" | "select" | "textarea" | "json" | "array"
export interface ActionFieldOption {
type: ActionFieldType
options?: readonly string[]
placeholder?: string
disabled?: boolean
optional?: boolean
}

export interface ActionFieldSchema {
Expand Down Expand Up @@ -136,15 +139,27 @@ export const getSubActionSchema = (actionType: ActionType) => {
fieldSchema: actionFieldSchemas[actionType] || {},
}
}

const LLM_MESSAGE_PLACEHOLDER =
"The input message for the AI to extract information. You may use templated expressions here."

const LLM_RESPONSE_SCHEMA_PLACEHOLDER = `An optional JSON object to control the format of the LLM output. This is mapping of field name to data type (Python data types). You may also add comments. If left blank, the LLM will output freeform text.
For example:
{
\t"website_name": "str",
\t"created_year": "int",
\t"url": "str # This must be a valid url!"
}`

const actionFieldSchemas: Partial<AllActionFieldSchemas> = {
webhook: {
url: { type: "input" },
url: { type: "input", placeholder: "The allowed domain." },
method: {
type: "select",
options: ["GET", "POST"],
},
path: { type: "input" },
secret: { type: "input" },
path: { type: "input", disabled: true },
secret: { type: "input", disabled: true },
},
http_request: {
url: { type: "input" },
Expand Down Expand Up @@ -186,35 +201,74 @@ const actionFieldSchemas: Partial<AllActionFieldSchemas> = {
},
"llm.translate": {
// TODO: Replace with supported languages and Command input
message: { type: "textarea" },
message: {
type: "textarea",
placeholder: LLM_MESSAGE_PLACEHOLDER,
},
from_language: { type: "input" },
to_language: { type: "input" },
response_schema: { type: "textarea" },
response_schema: {
type: "json",
placeholder: LLM_RESPONSE_SCHEMA_PLACEHOLDER,
optional: true,
},
},
"llm.extract": {
message: { type: "textarea" },
message: {
type: "textarea",
placeholder: LLM_MESSAGE_PLACEHOLDER,
},
// TODO: Replace with Command input and ability to add to list
groups: { type: "array" }, // Assuming a comma-separated string to be transformed into an array
response_schema: { type: "json" },
response_schema: {
type: "json",
placeholder: LLM_RESPONSE_SCHEMA_PLACEHOLDER,
optional: true,
},
},
"llm.label": {
// TODO: Replace with Command input and ability to add to list
message: { type: "textarea" },
message: {
type: "textarea",
placeholder: LLM_MESSAGE_PLACEHOLDER,
},
labels: { type: "array" }, // Assuming a comma-separated string to be transformed into an array
response_schema: { type: "json" },
response_schema: {
type: "json",
placeholder: LLM_RESPONSE_SCHEMA_PLACEHOLDER,
optional: true,
},
},
"llm.choice": {
message: { type: "textarea" },
message: {
type: "textarea",
placeholder: LLM_MESSAGE_PLACEHOLDER,
},
choices: { type: "array" },
response_schema: { type: "json" },
response_schema: {
type: "json",
placeholder: LLM_RESPONSE_SCHEMA_PLACEHOLDER,
optional: true,
},
},
"llm.summarize": {
message: { type: "textarea" },
response_schema: { type: "json" },
message: {
type: "textarea",
placeholder: LLM_MESSAGE_PLACEHOLDER,
},
response_schema: {
type: "json",
placeholder: LLM_RESPONSE_SCHEMA_PLACEHOLDER,
optional: true,
},
},
open_case: {
title: { type: "input" },
payload: { type: "json" },
payload: {
type: "json",
placeholder:
"A JSON payload to be included in the case. You may use templated expressions here.",
},
malice: {
type: "select",
options: ["malicious", "benign"],
Expand All @@ -226,9 +280,22 @@ const actionFieldSchemas: Partial<AllActionFieldSchemas> = {
priority: {
type: "select",
options: ["low", "medium", "high", "critical"],
optional: true,
},
context: {
type: "json",
optional: true,
placeholder: "An optional JSON object containing additional context.",
},
action: {
type: "textarea",
optional: true,
placeholder: "Action to be taken.",
},
suppression: {
type: "json",
optional: true,
placeholder: "An optional JSON object containing suppression rules.",
},
context: { type: "json" },
action: { type: "textarea" },
suppression: { type: "json" },
},
}
63 changes: 52 additions & 11 deletions frontend/src/components/forms/action.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { z } from "zod"

import { Action, ActionType } from "@/types/schemas"
import { getActionById, updateAction } from "@/lib/flow"
import { cn } from "@/lib/utils"
import { cn, undoSlugify } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
Expand Down Expand Up @@ -169,7 +169,7 @@ export function ActionForm({
// against undefined schemas or data
if (isLoading) {
// TODO: Make this loading state look more like a form
return <FormLoading className="bg-slate-100" />
return <FormLoading />
}
if (error) {
return (
Expand Down Expand Up @@ -249,12 +249,12 @@ export function ActionForm({
name="title"
render={({ field }) => (
<FormItem>
<FormLabel className="text-xs">Name</FormLabel>
<FormLabel className="text-xs">Title</FormLabel>
<FormControl>
<Input
{...field}
className="text-xs"
placeholder="Add action name..."
placeholder="Add action title..."
value={form.watch("title", "")}
/>
</FormControl>
Expand Down Expand Up @@ -313,7 +313,13 @@ export function ActionForm({
return (
<FormItem>
<FormLabel className="text-xs">
{inputKey}
{undoSlugify(inputKey)}
{inputOption.optional && (
<span className="text-muted-foreground">
{" "}
(Optional)
</span>
)}
</FormLabel>
<FormControl>
<Select
Expand Down Expand Up @@ -358,14 +364,23 @@ export function ActionForm({
return (
<FormItem>
<FormLabel className="text-xs">
{inputKey}
{undoSlugify(inputKey)}
{inputOption.optional && (
<span className="text-muted-foreground">
{" "}
(Optional)
</span>
)}
</FormLabel>
<FormControl>
<Textarea
{...field}
className="min-h-48 text-xs"
value={form.watch(typedKey, "")}
placeholder="Input text here..."
placeholder={
inputOption.placeholder ??
"Input text here..."
}
/>
</FormControl>
<FormMessage />
Expand All @@ -375,15 +390,24 @@ export function ActionForm({
return (
<FormItem>
<FormLabel className="text-xs">
{inputKey}
{undoSlugify(inputKey)}
{inputOption.optional && (
<span className="text-muted-foreground">
{" "}
(Optional)
</span>
)}
</FormLabel>
<FormControl>
<pre>
<Textarea
{...field}
className="min-h-48 text-xs"
value={form.watch(typedKey, "")}
placeholder="Input JSON here..."
placeholder={
inputOption.placeholder ??
"Input JSON here..."
}
/>
</pre>
</FormControl>
Expand All @@ -402,7 +426,13 @@ export function ActionForm({
return (
<FormItem>
<FormLabel className="text-xs">
{inputKey}
{undoSlugify(inputKey)}
{inputOption.optional && (
<span className="text-muted-foreground">
{" "}
(Optional)
</span>
)}
</FormLabel>
<div className="flex flex-col space-y-2">
{fields.map((field, index) => {
Expand Down Expand Up @@ -452,13 +482,24 @@ export function ActionForm({
return (
<FormItem>
<FormLabel className="text-xs">
{inputKey}
{undoSlugify(inputKey)}
{inputOption.optional && (
<span className="text-muted-foreground">
{" "}
(Optional)
</span>
)}
</FormLabel>
<FormControl>
<Input
{...field}
className="text-xs"
value={form.watch(typedKey, "")}
placeholder={
inputOption.placeholder ??
"Input text here..."
}
disabled={inputOption.disabled}
/>
</FormControl>
<FormMessage />
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/lib/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,12 @@ export function slugify(value: string, delimiter: string = "_"): string {
.replace(/\s+/g, delimiter)
}

export function undoSlugify(value: string, delimiter: string = "_"): string {
return value
.replace(new RegExp(delimiter, "g"), " ")
.replace(/\b\w/g, (l) => l.toUpperCase())
}

/**
*
* @param key <Action ID>.<Action Slug>
Expand Down

0 comments on commit c7d8e5e

Please sign in to comment.