feat(pages): custom prompts (#10985)

Signed-off-by: Matt Krick <matt.krick@gmail.com>

Author: mattkrick

.config/kyselyMigrations.ts

@@ -2,6 +2,8 @@
 // so kysely.config.ts is not required by the bundle, only in dev
 
 export const migrations = {
+  // Uncomment this if you need to fix your local DB migration order!
+  // allowUnorderedMigrations: true,
   getMigrationPrefix: () => `${new Date().toISOString()}_`,
   migrationFolder: './packages/server/postgres/migrations',
   migrationTableSchema: 'public',

codegen.json

@@ -73,6 +73,7 @@
           "AzureDevOpsIntegration": ".types/AzureDevOpsIntegration#AzureDevOpsIntegrationSource",
           "AzureDevOpsRemoteProject": "./types/AzureDevOpsRemoteProject#AzureDevOpsRemoteProjectSource",
           "AzureDevOpsWorkItem": "../../dataloader/azureDevOpsLoaders#AzureDevOpsWorkItem",
+          "AIPrompt": "../../postgres/types/index#AIPrompt",
           "BatchArchiveTasksSuccess": "./types/BatchArchiveTasksSuccess#BatchArchiveTasksSuccessSource",
           "Comment": "../../postgres/types/index#Comment as CommentDB",
           "Company": "./types/Company#CompanySource",

docker/images/parabol-ubi/environments/pipeline

@@ -35,6 +35,7 @@ PGADMIN_DEFAULT_EMAIL=''
 PGADMIN_DEFAULT_PASSWORD=''
 PGSSLMODE=''
 PORT='3000'
+HOCUS_POCUS_PORT='3003'
 # Database configurations must be the same used in the build.yml Github workflow
 POSTGRES_PASSWORD='temppassword'
 POSTGRES_USER='tempuser'

package.json

@@ -107,9 +107,9 @@
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
     "jscodeshift": "^0.14.0",
-    "kysely": "^0.27.5",
+    "kysely": "^0.27.6",
     "kysely-codegen": "^0.17.0",
-    "kysely-ctl": "^0.11.0",
+    "kysely-ctl": "^0.12.1",
     "lerna": "^6.4.1",
     "marked": "^15.0.7",
     "mini-css-extract-plugin": "^2.7.2",

packages/client/tiptap/extensions/insightsBlock/InsightsBlock.ts

@@ -16,6 +16,7 @@ export interface InsightsBlockAttrs {
   title: string
   id: string
   hash: string
+  prompt: string
 }
 
 declare module '@tiptap/core' {
@@ -101,6 +102,13 @@ export const InsightsBlock = InsightsBlockBase.extend<never, {markdown: Markdown
         renderHTML: (attributes) => ({
           'data-hash': attributes.hash
         })
+      },
+      prompt: {
+        default: '',
+        parseHTML: (element) => element.getAttribute('data-prompt'),
+        renderHTML: (attributes) => ({
+          'data-prompt': attributes.prompt
+        })
       }
     }
   },

packages/client/tiptap/extensions/insightsBlock/InsightsBlockEditing.tsx

@@ -1,6 +1,7 @@
 import {type NodeViewProps} from '@tiptap/react'
 import graphql from 'babel-plugin-relay/macro'
 import type {InsightsBlockEditingQuery} from '../../../__generated__/InsightsBlockEditingQuery.graphql'
+import Ellipsis from '../../../components/Ellipsis/Ellipsis'
 import {MeetingDatePicker} from '../../../components/MeetingDatePicker'
 import {MeetingTypePickerCombobox} from '../../../components/MeetingTypePickerCombobox'
 import {SpecificMeetingPickerRoot} from '../../../components/SpecificMeetingPickerRoot'
@@ -10,33 +11,37 @@ import useMutationProps from '../../../hooks/useMutationProps'
 import {Button} from '../../../ui/Button/Button'
 import {quickHash} from '../../../utils/quickHash'
 import type {InsightsBlockAttrs} from './InsightsBlock'
+import {InsightsBlockPromptRoot} from './InsightsBlockPromptRoot'
 
 const queryNode = graphql`
-  query InsightsBlockEditingQuery($meetingIds: [ID!]!) {
+  query InsightsBlockEditingQuery($meetingIds: [ID!]!, $prompt: String!) {
     viewer {
-      pageInsights(meetingIds: $meetingIds)
+      pageInsights(meetingIds: $meetingIds, prompt: $prompt)
     }
   }
 `
 
 export const InsightsBlockEditing = (props: NodeViewProps) => {
   const {editor, node, updateAttributes} = props
   const attrs = node.attrs as InsightsBlockAttrs
-  const {id, after, before, meetingTypes, teamIds, meetingIds, hash, title} = attrs
+  const {id, after, before, meetingTypes, teamIds, meetingIds, hash, title, prompt} = attrs
   const canQueryMeetings = teamIds.length > 0 && meetingTypes.length > 0 && after && before
   const {submitting, submitMutation, onCompleted} = useMutationProps()
   const atmosphere = useAtmosphere()
   const disabled = submitting || meetingIds.length < 1
 
   const generateInsights = async () => {
     if (disabled) return
-    const resultsHash = await quickHash(meetingIds)
+    const resultsHash = await quickHash([...meetingIds, prompt])
     if (resultsHash === hash) {
       updateAttributes({editing: false})
       return
     }
     submitMutation()
-    const res = await atmosphere.fetchQuery<InsightsBlockEditingQuery>(queryNode, {meetingIds})
+    const res = await atmosphere.fetchQuery<InsightsBlockEditingQuery>(queryNode, {
+      meetingIds,
+      prompt
+    })
     onCompleted()
     if (res instanceof Error) {
       atmosphere.eventEmitter.emit('addSnackbar', {
@@ -67,7 +72,7 @@ export const InsightsBlockEditing = (props: NodeViewProps) => {
         }}
         value={title}
       />
-      <div className='grid grid-cols-[auto_1fr] gap-4 p-4'>
+      <div className='grid grid-cols-[auto_1fr] gap-4 py-4'>
         {/* Row 1 */}
         <label className='self-center font-semibold'>Teams</label>
         <TeamPickerComboboxRoot updateAttributes={updateAttributes} attrs={attrs} />
@@ -81,6 +86,7 @@ export const InsightsBlockEditing = (props: NodeViewProps) => {
       {canQueryMeetings && (
         <SpecificMeetingPickerRoot updateAttributes={updateAttributes} attrs={attrs} />
       )}
+      <InsightsBlockPromptRoot updateAttributes={updateAttributes} attrs={attrs} />
       <div className='flex justify-end p-4 select-none'>
         <Button
           variant='secondary'
@@ -90,6 +96,7 @@ export const InsightsBlockEditing = (props: NodeViewProps) => {
           disabled={disabled}
         >
           Generate Insights
+          {submitting ? <Ellipsis /> : undefined}
         </Button>
       </div>
     </>

packages/client/tiptap/extensions/insightsBlock/InsightsBlockPrompt.tsx

@@ -0,0 +1,102 @@
+import HistoryIcon from '@mui/icons-material/History'
+import type {NodeViewProps} from '@tiptap/core'
+import graphql from 'babel-plugin-relay/macro'
+import dayjs from 'dayjs'
+import {useRef} from 'react'
+import {usePreloadedQuery, type PreloadedQuery} from 'react-relay'
+import {Menu} from '~/ui/Menu/Menu'
+import {MenuContent} from '~/ui/Menu/MenuContent'
+import {MenuItem} from '~/ui/Menu/MenuItem'
+import type {InsightsBlockPromptQuery} from '../../../__generated__/InsightsBlockPromptQuery.graphql'
+import type {InsightsBlockAttrs} from './InsightsBlock'
+
+const query = graphql`
+  query InsightsBlockPromptQuery {
+    viewer {
+      aiPrompts {
+        id
+        content
+        isUserDefined
+        lastUsedAt
+        title
+      }
+    }
+  }
+`
+
+interface Props {
+  updateAttributes: NodeViewProps['updateAttributes']
+  attrs: InsightsBlockAttrs
+  queryRef: PreloadedQuery<InsightsBlockPromptQuery>
+}
+
+export const InsightsBlockPrompt = (props: Props) => {
+  const {attrs, queryRef, updateAttributes} = props
+  const data = usePreloadedQuery<InsightsBlockPromptQuery>(query, queryRef)
+  const {viewer} = data
+  const {aiPrompts} = viewer
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
+  const {prompt} = attrs
+  const defaultValue = prompt || aiPrompts[0]?.content || ''
+  return (
+    <div>
+      <h3 className='pt-2'>What do you want to know?</h3>
+      <div className='relative w-full'>
+        <div className='absolute top-0 right-0'>
+          <Menu
+            trigger={
+              <button className='bg-inherit p-1 outline-none'>
+                <HistoryIcon className='cursor-pointer' />
+              </button>
+            }
+          >
+            <MenuContent align='end' sideOffset={4}>
+              {aiPrompts
+                .toSorted((a, b) => {
+                  if (a.isUserDefined !== b.isUserDefined) return a.isUserDefined ? -1 : 1
+                  return a.lastUsedAt > b.lastUsedAt ? -1 : 1
+                })
+                .map((prompt) => {
+                  const {id, lastUsedAt, content, title, isUserDefined} = prompt
+                  const subtitle = isUserDefined
+                    ? dayjs(lastUsedAt).format('ddd MMM D')
+                    : 'Provided by Parabol'
+                  return (
+                    <MenuItem
+                      key={id}
+                      onClick={() => {
+                        textAreaRef.current!.value = content
+                        updateAttributes({prompt: content})
+                      }}
+                      className='w-80 flex-col items-start justify-start'
+                    >
+                      <div className='w-72 overflow-hidden text-ellipsis whitespace-nowrap'>
+                        {title}
+                      </div>
+                      <div className='text-xs font-bold text-slate-600'>{subtitle}</div>
+                      {}
+                    </MenuItem>
+                  )
+                })}
+            </MenuContent>
+          </Menu>
+        </div>
+        <textarea
+          defaultValue={defaultValue}
+          autoComplete='on'
+          autoCorrect='on'
+          spellCheck={true}
+          minLength={10}
+          placeholder={'Summarize the meeting data and extract key insights...'}
+          ref={textAreaRef}
+          rows={13}
+          cols={30}
+          onChange={(e) => {
+            updateAttributes({prompt: e.target.value})
+          }}
+          className='max-h-96 min-h-14 w-full resize-y rounded-md pr-6 outline-hidden focus:ring-2'
+        ></textarea>
+      </div>
+    </div>
+  )
+}

packages/client/tiptap/extensions/insightsBlock/InsightsBlockPromptRoot.tsx

@@ -0,0 +1,29 @@
+import type {NodeViewProps} from '@tiptap/core'
+import {Suspense} from 'react'
+import type {InsightsBlockPromptQuery} from '../../../__generated__/InsightsBlockPromptQuery.graphql'
+import query from '../../../__generated__/InsightsBlockPromptQuery.graphql'
+import useQueryLoaderNow from '../../../hooks/useQueryLoaderNow'
+import {Loader} from '../../../utils/relay/renderLoader'
+import type {InsightsBlockAttrs} from './InsightsBlock'
+import {InsightsBlockPrompt} from './InsightsBlockPrompt'
+
+interface Props {
+  updateAttributes: NodeViewProps['updateAttributes']
+  attrs: InsightsBlockAttrs
+}
+
+export const InsightsBlockPromptRoot = (props: Props) => {
+  const {attrs, updateAttributes} = props
+  const queryRef = useQueryLoaderNow<InsightsBlockPromptQuery>(query)
+  return (
+    <Suspense fallback={<Loader />}>
+      {queryRef && (
+        <InsightsBlockPrompt
+          queryRef={queryRef}
+          attrs={attrs}
+          updateAttributes={updateAttributes}
+        />
+      )}
+    </Suspense>
+  )
+}

packages/server/graphql/public/fields/aiPrompts.ts

@@ -0,0 +1,19 @@
+import getKysely from '../../../postgres/getKysely'
+import {getUserId} from '../../../utils/authorization'
+import {UserResolvers} from '../resolverTypes'
+
+export const aiPrompts: NonNullable<UserResolvers['aiPrompts']> = async (
+  _source,
+  _args,
+  {authToken}
+) => {
+  const viewerId = getUserId(authToken)
+  const pg = getKysely()
+  const aiPrompts = await pg
+    .selectFrom('AIPrompt')
+    .selectAll()
+    .where('userId', 'in', [viewerId, 'aGhostUser'])
+    .orderBy('lastUsedAt', 'desc')
+    .execute()
+  return aiPrompts
+}