feat: prompt notepad (#340)

packages/backend/src/api/v1/template-versions.ts

@@ -5,6 +5,7 @@ import postgres from "postgres"
 import { unCamelObject } from "@/src/utils/misc"
 import { checkAccess } from "@/src/utils/authorization"
 import { z } from "zod"
+import { clearUndefined } from "@/src/utils/ingest"
 
 const versions = new Router({
   prefix: "/template_versions",
@@ -82,14 +83,16 @@ versions.patch(
   "/:id",
   checkAccess("prompts", "update"),
   async (ctx: Context) => {
+    console.log("ctx.request.body", ctx.request.body)
     const bodySchema = z.object({
       content: z.array(z.any()),
       extra: z.any(),
       testValues: z.any(),
       isDraft: z.boolean(),
+      notes: z.string().optional().nullable(),
     })
 
-    const { content, extra, testValues, isDraft } = bodySchema.parse(
+    const { content, extra, testValues, isDraft, notes } = bodySchema.parse(
       ctx.request.body,
     )
 
@@ -111,11 +114,15 @@ versions.patch(
 
     const [updatedTemplateVersion] = await sql`
       update template_version 
-      set
-        content = ${sql.json(content)},
-        extra = ${sql.json(unCamelObject(extra))},
-        test_values = ${sql.json(testValues)},
-        is_draft = ${isDraft}
+      set ${sql(
+        clearUndefined({
+          content: sql.json(content),
+          extra: sql.json(unCamelObject(extra)),
+          test_values: sql.json(testValues),
+          is_draft: isDraft,
+          notes,
+        }),
+      )}
       where 
         id = ${ctx.params.id}
       returning *

packages/backend/src/api/v1/templates.ts

@@ -1,5 +1,6 @@
 import { checkAccess } from "@/src/utils/authorization"
 import sql from "@/src/utils/db"
+import { clearUndefined } from "@/src/utils/ingest"
 import Context from "@/src/utils/koa"
 import { unCamelObject } from "@/src/utils/misc"
 import Router from "koa-router"
@@ -32,14 +33,15 @@ templates.get("/", async (ctx: Context) => {
 templates.post("/", checkAccess("prompts", "create"), async (ctx: Context) => {
   const { projectId, userId } = ctx.state
 
-  const { slug, mode, content, extra, testValues, isDraft } = ctx.request
+  const { slug, mode, content, extra, testValues, isDraft, notes } = ctx.request
     .body as {
     slug: string
     mode: string
     content: any[]
     extra: any
     testValues: any
     isDraft: boolean
+    notes: string
   }
 
   const [template] = await sql`
@@ -52,13 +54,16 @@ templates.post("/", checkAccess("prompts", "create"), async (ctx: Context) => {
   `
 
   const [templateVersion] = await sql`
-    insert into template_version ${sql({
-      templateId: template.id,
-      content: sql.json(content),
-      extra: sql.json(unCamelObject(extra)),
-      testValues: sql.json(testValues),
-      isDraft: isDraft,
-    })} returning *
+    insert into template_version ${sql(
+      clearUndefined({
+        templateId: template.id,
+        content: sql.json(content),
+        extra: sql.json(unCamelObject(extra)),
+        testValues: sql.json(testValues),
+        isDraft: isDraft,
+        notes,
+      }),
+    )} returning *
   `
 
   ctx.body = {
@@ -123,21 +128,25 @@ templates.post(
   "/:id/versions",
   checkAccess("prompts", "update"),
   async (ctx: Context) => {
-    const { content, extra, testValues, isDraft } = ctx.request.body as {
+    const { content, extra, testValues, isDraft, notes } = ctx.request.body as {
       content: any[]
       extra: any
       testValues: any
       isDraft: boolean
+      notes: string
     }
 
     const [templateVersion] = await sql`
-    insert into template_version (
-      template_id, content, extra, test_values, is_draft
-    ) values (
-      ${ctx.params.id}, ${sql.json(content)}, ${sql.json(unCamelObject(extra))}, ${sql.json(
-        testValues,
-      )}, ${isDraft}
-    ) returning *
+    insert into template_version ${sql(
+      clearUndefined({
+        templateId: ctx.params.id,
+        content: sql.json(content),
+        extra: sql.json(unCamelObject(extra)),
+        test_values: sql.json(testValues),
+        isDraft,
+        notes,
+      }),
+    )} returning *
   `
 
     ctx.body = templateVersion

packages/db/0015.sql

@@ -0,0 +1 @@
+alter table template_version add column if not exists notes text;

packages/frontend/components/SmartViewer/Message.tsx

@@ -6,8 +6,6 @@ import {
   Code,
   Flex,
   Group,
-  JsonInput,
-  Modal,
   Paper,
   Select,
   Space,
@@ -18,21 +16,19 @@ import {
   ThemeIcon,
 } from "@mantine/core"
 import {
-  IconCross,
   IconInfoCircle,
   IconRobot,
   IconTool,
   IconTrash,
   IconUser,
-  IconX,
 } from "@tabler/icons-react"
 import Image from "next/image"
 import ProtectedText from "../blocks/ProtectedText"
 import { RenderJson } from "./RenderJson"
 
 import { useColorScheme } from "@mantine/hooks"
 import { circularPro } from "@/utils/theme"
-import { useEffect, useState } from "react"
+import { useEffect } from "react"
 
 import { openConfirmModal } from "@mantine/modals"
 
@@ -175,7 +171,7 @@ function ToolCallsMessage({
                   }}
                 />
               ) : (
-                <Text span fw="bold" size="xs">
+                <Text span size="xs">
                   {toolCall?.id}
                 </Text>
               )}
@@ -285,20 +281,25 @@ function ImageMessage({ data, codeBg, compact }) {
   )
 }
 
-function PropEditor({ value, onChange, editable, placeholder }) {
-  return editable ? (
-    <TextInput
-      value={value}
-      size="xs"
-      opacity={0.7}
-      placeholder={placeholder}
-      radius="sm"
-      mb={5}
-      onChange={(e) => onChange(e.target.value)}
-      style={{ width: "100%" }}
-    />
-  ) : (
-    <Text fw="bold">{value}</Text>
+function PropEditor({ value, onChange, editable, placeholder, label }) {
+  return (
+    <Group gap={4} wrap="nowrap">
+      {label && <Text size="xs">{label}:</Text>}
+      {editable ? (
+        <TextInput
+          value={value}
+          size="xs"
+          opacity={0.7}
+          placeholder={placeholder}
+          radius="sm"
+          mb={5}
+          onChange={(e) => onChange(e.target.value)}
+          style={{ width: "100%" }}
+        />
+      ) : (
+        <Text size="xs">{value}</Text>
+      )}
+    </Group>
   )
 }
 
@@ -319,6 +320,7 @@ function ChatMessageContent({
           onChange={(name) => onChange({ ...data, name })}
           editable={editable}
           placeholder={"Tool name"}
+          label={"Name"}
         />
       )}
 
@@ -329,6 +331,7 @@ function ChatMessageContent({
           onChange={(toolCallId) => onChange({ ...data, toolCallId })}
           editable={editable}
           placeholder={"Tool call ID"}
+          label={"ID"}
         />
       )}
 

packages/frontend/components/blocks/Feedbacks/index.tsx

@@ -1,7 +1,15 @@
 import { openUpgrade } from "@/components/layout/UpgradeModal"
 import { useOrg } from "@/utils/dataHooks"
 import { useFixedColorScheme } from "@/utils/hooks"
-import { ActionIcon, Button, Group, Popover, TextInput } from "@mantine/core"
+import {
+  ActionIcon,
+  Button,
+  Group,
+  Popover,
+  Stack,
+  TextInput,
+  Textarea,
+} from "@mantine/core"
 import { IconMessage, IconThumbDown, IconThumbUp } from "@tabler/icons-react"
 import { useState } from "react"
 import { Feedback } from "shared"
@@ -96,24 +104,28 @@ export default function Feedbacks({
           </ActionIcon>
         </Popover.Target>
         <Popover.Dropdown>
-          <TextInput
-            value={comment}
-            size="xs"
-            mt="xs"
-            placeholder="Add a comment"
-            onChange={(e) => setComment(e.target.value)}
-          />
-          <Button
-            mt="md"
-            size="xs"
-            style={{ float: "right" }}
-            onClick={() => {
-              feedback.comment = comment
-              update(feedback)
-            }}
-          >
-            Save
-          </Button>
+          <Stack align="end" mt={2}>
+            <Textarea
+              value={comment}
+              size="xs"
+              autosize
+              minRows={2}
+              w="100%"
+              placeholder="Add a comment"
+              onChange={(e) => setComment(e.target.value)}
+            />
+            <Button
+              size="xs"
+              variant="default"
+              style={{ float: "right" }}
+              onClick={() => {
+                feedback.comment = comment
+                update(feedback)
+              }}
+            >
+              Save
+            </Button>
+          </Stack>
         </Popover.Dropdown>
       </Popover>
     )

packages/frontend/components/blocks/RunInputOutput.tsx

@@ -311,7 +311,7 @@ export default function RunInputOutput({
                     >
                       {run.templateVersionId
                         ? "Open template"
-                        : "Open in playground"}
+                        : "Open in Playground"}
                     </Button>
                   </Stack>
                 )}

packages/frontend/components/prompts/Provider.tsx

@@ -1,27 +1,37 @@
 import { jsonrepair } from "jsonrepair"
 
 import {
+  ActionIcon,
   Button,
   Checkbox,
   Group,
   JsonInput,
   Modal,
   NavLink,
   NumberInput,
+  Popover,
   Select,
   Text,
+  Tooltip,
 } from "@mantine/core"
 
 import { notifications } from "@mantine/notifications"
 
 import { MODELS, Provider } from "shared"
 import { useState } from "react"
 import Link from "next/link"
-import { IconTools } from "@tabler/icons-react"
+import { IconInfoCircle, IconTools } from "@tabler/icons-react"
 
-export const ParamItem = ({ name, value }) => (
+export const ParamItem = ({ name, value, description }) => (
   <Group justify="space-between">
-    <Text size="sm">{name}</Text>
+    <Group gap={5}>
+      <Text size="sm">{name}</Text>
+      {description && (
+        <Tooltip label={description}>
+          <IconInfoCircle size={14} />
+        </Tooltip>
+      )}
+    </Group>
     {typeof value === "string" || typeof value === "number" ? (
       <Text size="sm">{value}</Text>
     ) : (