feat(condo): DOMA-11178 Add comment response generation using flowise (#6224)

* fix(condo): add polling logic

* fix(condo): proof of work

* fix(condo): fix button styles

* fix(condo): move consts to different files

* fix(condo): add typescript typings

* fix(condo): fixes on review

* fix(condo): fixes on review

* fix(condo): add useAIFlow function

* fix(condo): add feature flags

* fix(condo): add feature flags

* fix(condo): add feature flags

* fix(condo): fixes on lint review

Author: toplenboren

apps/condo/domains/ai/components/AIFlowButton.css

@@ -0,0 +1,27 @@
+.condo-btn.condo-btn-default.condo-btn-secondary.ai-flow-button {
+  height: 38px;
+  padding: 8px;
+  border-color: var(--condo-global-color-green-5);
+  border-radius: 38px;
+}
+
+.condo-btn.condo-btn-default.condo-btn-secondary.ai-flow-button span {
+  color: var(--condo-global-color-green-5);
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.condo-btn.condo-btn-default.condo-btn-secondary.ai-flow-button:focus,
+.condo-btn.condo-btn-default.condo-btn-secondary.ai-flow-button:active {
+  outline: none;
+  box-shadow: none;
+}
+
+.condo-btn.condo-btn-default.condo-btn-secondary.ai-flow-button:focus-visible {
+  outline: 2px solid var(--condo-global-color-green-5);
+  outline-offset: 2px;
+}
+
+button.condo-btn.condo-btn-default.condo-btn-loading.condo-btn-secondary.ai-flow-button .condo-btn-loading-icon {
+  width: 16px;
+}

apps/condo/domains/ai/components/AIFlowButton.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { Button, ButtonProps } from '@open-condo/ui'
+import './AIFlowButton.css'
+
+type AIFlowButtonProps = Omit<ButtonProps, 'type'>
+
+function Sparkles () {
+    return (
+        <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+            <g clipPath='url(#clip0_34298_399)'>
+                <path fillRule='evenodd' clipRule='evenodd' d='M7.39599 0.869791C7.56986 0.737897 7.78211 0.666504 8.00034 0.666504C8.21858 0.666504 8.43083 0.737897 8.6047 0.869791C8.77857 1.00168 8.90453 1.18684 8.96334 1.397L8.96692 1.4103L10.0209 5.50014C10.0506 5.61549 10.1108 5.72077 10.195 5.80501C10.2792 5.88921 10.3844 5.94932 10.4997 5.9791C10.4997 5.97908 10.4998 5.97911 10.4997 5.9791L14.5897 7.0331L14.6006 7.036C14.8116 7.0942 14.9977 7.22002 15.1303 7.39416C15.2629 7.56829 15.3347 7.78113 15.3347 8C15.3347 8.21888 15.2629 8.43171 15.1303 8.60585C14.9977 8.77998 14.8116 8.9058 14.6006 8.964L14.5897 8.96691L10.4999 10.0209C10.3845 10.0506 10.2792 10.1108 10.195 10.195C10.1108 10.2792 10.0506 10.3845 10.0209 10.4999L8.96623 14.5898L8.96268 14.603C8.90386 14.8132 8.77791 14.9983 8.60404 15.1302C8.43017 15.2621 8.21792 15.3335 7.99968 15.3335C7.78144 15.3335 7.56919 15.2621 7.39532 15.1302C7.22145 14.9983 7.09549 14.8132 7.03668 14.603L7.0331 14.5897L5.97915 10.4999C5.97913 10.4998 5.97916 10.4999 5.97915 10.4999C5.94937 10.3846 5.88922 10.2792 5.80502 10.195C5.72078 10.1108 5.6155 10.0506 5.50015 10.0209L1.41021 8.96622L1.39464 8.962C1.18531 8.90259 1.00106 8.77651 0.869869 8.60289C0.738676 8.42928 0.667694 8.21761 0.667694 8C0.667694 7.7824 0.738676 7.57073 0.869869 7.39711C1.00106 7.2235 1.18531 7.09742 1.39464 7.038L1.41011 7.03381L5.50011 5.97848C5.61543 5.94875 5.7208 5.88864 5.80504 5.80446C5.88923 5.72033 5.94936 5.61519 5.97919 5.49996C5.97917 5.50003 5.97921 5.4999 5.97919 5.49996L7.0338 1.41021L7.03734 1.397C7.09616 1.18684 7.22211 1.00169 7.39599 0.869791ZM8.00024 3.00213L8.72977 5.83304C8.81905 6.17911 8.99947 6.4951 9.2522 6.74782C9.50492 7.00054 9.82074 7.18092 10.1668 7.2702L12.9988 8L10.167 8.72976C9.82091 8.81904 9.50492 8.99947 9.2522 9.25219C8.99947 9.50491 8.81909 9.82073 8.72981 10.1668L7.99978 12.9979L7.27025 10.167C7.18097 9.8209 7.00055 9.50491 6.74783 9.25219C6.49511 8.99947 6.17928 8.81908 5.83321 8.7298L3.00264 7.9999L5.83312 7.26956C5.83308 7.26957 5.83316 7.26955 5.83312 7.26956C6.17902 7.18035 6.49484 7.0001 6.74752 6.7476C7.00023 6.49506 7.18068 6.17945 7.27012 5.83356L8.00024 3.00213Z' fill='#2BC359'/>
+                <path fillRule='evenodd' clipRule='evenodd' d='M13.3333 1.33325C13.7015 1.33325 14 1.63173 14 1.99992V4.66658C14 5.03477 13.7015 5.33325 13.3333 5.33325C12.9651 5.33325 12.6667 5.03477 12.6667 4.66658V1.99992C12.6667 1.63173 12.9651 1.33325 13.3333 1.33325Z' fill='#2BC359'/>
+                <path fillRule='evenodd' clipRule='evenodd' d='M11.3333 3.33341C11.3333 2.96522 11.6318 2.66675 12 2.66675H14.6667C15.0349 2.66675 15.3333 2.96522 15.3333 3.33341C15.3333 3.7016 15.0349 4.00008 14.6667 4.00008H12C11.6318 4.00008 11.3333 3.7016 11.3333 3.33341Z' fill='#2BC359'/>
+                <path fillRule='evenodd' clipRule='evenodd' d='M2.66667 10.6667C3.03486 10.6667 3.33333 10.9652 3.33333 11.3334V12.6667C3.33333 13.0349 3.03486 13.3334 2.66667 13.3334C2.29848 13.3334 2 13.0349 2 12.6667V11.3334C2 10.9652 2.29848 10.6667 2.66667 10.6667Z' fill='#2BC359'/>
+                <path fillRule='evenodd' clipRule='evenodd' d='M1.33334 11.9999C1.33334 11.6317 1.63182 11.3333 2.00001 11.3333H3.33334C3.70153 11.3333 4.00001 11.6317 4.00001 11.9999C4.00001 12.3681 3.70153 12.6666 3.33334 12.6666H2.00001C1.63182 12.6666 1.33334 12.3681 1.33334 11.9999Z' fill='#2BC359'/>
+            </g>
+            <defs>
+                <clipPath id='clip0_34298_399'>
+                    <rect width='16' height='16' fill='white'/>
+                </clipPath>
+            </defs>
+        </svg>
+    )
+}
+
+export function AIFlowButton ({ children, loading, disabled, ...props }: AIFlowButtonProps & { loading?: boolean, disabled?: boolean }) {
+    return (
+        <Button
+            className='ai-flow-button'
+            type='secondary'
+            icon={<Sparkles/>}
+            loading={loading}
+            disabled={disabled ? disabled : loading}
+            {...props}
+        >
+            {children}
+        </Button>
+    )
+}

apps/condo/domains/ai/constants/index.js apps/condo/domains/ai/constants.jsapps/condo/domains/ai/constants/index.js renamed to apps/condo/domains/ai/constants.js

@@ -1,6 +1,3 @@
-const conf = require('@open-condo/config')
-
-
 const TASK_STATUSES = {
     PROCESSING: 'processing',
     COMPLETED: 'completed',
@@ -12,27 +9,8 @@ const FLOW_ADAPTERS = {
     FLOWISE: 'flowise',
 }
 
-/**
- *
- * @example
- * {
- *     default: {
- *         example: {
- *             adapter: 'flowise',
- *             predictionUrl: 'http://localhost:3000/api/v1/prediction/ed7891c2-19bf-4651-b96a-cdf169ea3dd8',
- *         },
- *     },
- *     custom: {
- *         my_custom_flow: {
- *             adapter: 'flowise',
- *             predictionUrl: 'http://localhost:3000/api/v1/prediction/ed7891c2-19bf-4651-b96a-cdf169ea3dd8',
- *         },
- *     },
- * }
- */
-const AI_FLOWS_CONFIG = conf.AI_FLOWS_CONFIG ? JSON.parse(conf.AI_FLOWS_CONFIG) : {}
-
 const CUSTOM_FLOW_TYPE = 'custom_flow'
+const TICKET_REWRITE_COMMENT_FLOW_TYPE = 'ticket_rewrite_comment_flow'
 
 /**
  * list of hardcoded flow types
@@ -41,11 +19,10 @@ const CUSTOM_FLOW_TYPE = 'custom_flow'
  * EXAMPLE: 'example'
  */
 const FLOW_TYPES = {
+    TICKET_REWRITE_COMMENT_FLOW_TYPE: TICKET_REWRITE_COMMENT_FLOW_TYPE,
 }
 const FLOW_TYPES_LIST = Object.values(FLOW_TYPES)
 
-const CUSTOM_FLOW_TYPES_LIST = Object.keys(AI_FLOWS_CONFIG?.custom || {})
-
 /**
  * Schemes for validating input and output data.
  * Syntax Ajv. Only object type.
@@ -76,6 +53,27 @@ const CUSTOM_FLOW_TYPES_LIST = Object.keys(AI_FLOWS_CONFIG?.custom || {})
  *     },
  */
 const FLOW_META_SCHEMAS = {
+    [TICKET_REWRITE_COMMENT_FLOW_TYPE]: {
+        input: {
+            type: 'object',
+            properties: {
+                comment: { type: 'string' },
+                answer: { type: 'string' },
+
+                ticketId: { type: 'string' },
+                ticketDetails: { type: 'string' },
+                ticketAddress: { type: 'string' },
+                ticketStatusName: { type: 'string' },
+                ticketLastComments: { type: 'string' },
+            },
+        },
+        output: {
+            type: 'object',
+            properties: {
+                answer: { type: 'string' },
+            },
+        },
+    },
     [CUSTOM_FLOW_TYPE]: {
         // Data for custom flows is only checked to ensure that it is an object
         input: {
@@ -90,20 +88,17 @@ const FLOW_META_SCHEMAS = {
 for (const [flowName, schemaByOperation] of Object.entries(FLOW_META_SCHEMAS)) {
     for (const [operation, schema] of Object.entries(schemaByOperation)) {
         if (operation !== 'input' && operation !== 'output') throw new Error(`Flow "${flowName}": You can only specify the properties "input" and "output"!`)
-        if (typeof schema !== 'object') throw new Error(`Flow "${flowName}" (${operation}): The meta schema must be object!`)
+        if (typeof schema !== 'object') throw new Error(`Flow "${flowName}" (${operation}): The meta schema must be an object!`)
         if (!('type' in schema)) throw new Error(`Flow "${flowName}" (${operation}): The meta schema must have a "type" field!`)
         if (schema.type !== 'object') throw new Error(`Flow "${flowName}" (${operation}): Field "type" in meta scheme must have value "object"!`)
     }
 }
 
-
 module.exports = {
     TASK_STATUSES,
     FLOW_TYPES,
     FLOW_TYPES_LIST,
-    CUSTOM_FLOW_TYPES_LIST,
     FLOW_META_SCHEMAS,
     CUSTOM_FLOW_TYPE,
     FLOW_ADAPTERS,
-    AI_FLOWS_CONFIG,
 }

apps/condo/domains/ai/hooks/useAIFlow.tsx

@@ -0,0 +1,134 @@
+import {
+    useCreateExecutionAiFlowTaskMutation,
+    useGetExecutionAiFlowTaskByIdLazyQuery,
+} from '@app/condo/gql'
+import getConfig from 'next/config'
+import { useState, useCallback } from 'react'
+
+import { getClientSideSenderInfo } from '@open-condo/codegen/utils/userId'
+import { useFeatureFlags } from '@open-condo/featureflags/FeatureFlagsContext'
+import { useAuth } from '@open-condo/next/auth'
+
+
+import { FLOW_TYPES_LIST, TASK_STATUSES } from '../constants.js'
+
+type FlowType = typeof FLOW_TYPES_LIST[number]
+
+type UseAIFlowPropsType<T> = {
+    flowType: FlowType
+    defaultContext?: object
+    timeout?: number
+}
+
+type UseAIFlowResultType<T> = [
+    (params?: { context?: object }) => Promise<{ data: T, error: object, localizedErrorText: string } | null>,
+    {
+        loading: boolean
+        data: T | null
+        error: Error | null
+    },
+]
+
+const DEFAULT_TIMEOUT_MS = 10000
+const TASK_FIRST_POLL_TIMEOUT_MS = 500
+const TASK_POLLING_INTERVAL_MS = 1000
+
+export function useAIFlow<T = object> ({
+    flowType,
+    defaultContext = {},
+    timeout = DEFAULT_TIMEOUT_MS,
+}: UseAIFlowPropsType<T>): UseAIFlowResultType<T> {
+    const { user } = useAuth()
+    const [createExecutionAIFlowMutation] = useCreateExecutionAiFlowTaskMutation()
+    const [getExecutionAiFlowTaskById] = useGetExecutionAiFlowTaskByIdLazyQuery()
+
+    const [loading, setLoading] = useState(false)
+    const [data, setData] = useState<T | null>(null)
+    const [error, setError] = useState<Error | null>(null)
+
+    const getAIFlowResult = useCallback(async ({ context = {} }): Promise<{ data: T, error: object, localizedErrorText: string }> => {
+        if (!user?.id) {
+            const err = new Error('User is not authenticated')
+            setError(err)
+            return { data: null, error: err, localizedErrorText: null }
+        }
+
+        setLoading(true)
+        setError(null)
+        setData(null)
+
+        const fullContext = { ...defaultContext, ...context }
+
+        try {
+            const createResult = await createExecutionAIFlowMutation({
+                variables: {
+                    data: {
+                        dv: 1,
+                        sender: getClientSideSenderInfo(),
+                        flowType,
+                        context: fullContext,
+                        user: { connect: { id: user.id } },
+                    },
+                },
+            })
+
+            const taskId = createResult.data?.task?.id
+            if (!taskId) { return { data: null, error: new Error('Failed to create a task'), localizedErrorText: null } }
+
+            await new Promise(resolve => setTimeout(resolve, TASK_FIRST_POLL_TIMEOUT_MS))
+
+            const startTime = Date.now()
+
+            while (Date.now() - startTime < timeout) {
+                const pollResult = await getExecutionAiFlowTaskById({
+                    variables: { id: taskId },
+                    fetchPolicy: 'no-cache',
+                })
+
+                const [task] = pollResult.data.task
+                if (!task) { return { data: null, error: new Error('Task not found'), localizedErrorText: null } }
+
+                if (task.status === TASK_STATUSES.COMPLETED) {
+                    const result = task.result as T
+                    setData(result)
+                    return { data: result, error: null, localizedErrorText: null }
+                } else if (task.status === TASK_STATUSES.ERROR || task.status === TASK_STATUSES.CANCELLED) {
+                    return { data: null, error: new Error(`Task in ${task.status} state`), localizedErrorText: task.errorMessage || null }
+                }
+
+                await new Promise(resolve => setTimeout(resolve, TASK_POLLING_INTERVAL_MS))
+            }
+
+            return { data: null, error: new Error('Flow timed out'), localizedErrorText: null }
+        } catch (err: any) {
+            const wrappedErr = err instanceof Error ? err : new Error(err.toString())
+            setError(wrappedErr)
+            return { data: null, error: wrappedErr, localizedErrorText: null }
+        } finally {
+            setLoading(false)
+        }
+    }, [
+        flowType,
+        timeout,
+        defaultContext,
+        createExecutionAIFlowMutation,
+        getExecutionAiFlowTaskById,
+        user?.id,
+    ])
+
+    return [getAIFlowResult, { loading, data, error }]
+}
+
+export function useAIConfig () {
+    const { publicRuntimeConfig: { aiEnabled } } = getConfig()
+    const { useFlag } = useFeatureFlags()
+
+    const rewriteTicketComment = useFlag('ui-ai-ticket-rewrite-comment')
+
+    return {
+        enabled: aiEnabled,
+        features: {
+            rewriteTicketComment,
+        },
+    }
+}

apps/condo/domains/ai/queries/ExecutionAIFlowTask.graphql

@@ -0,0 +1,23 @@
+query getExecutionAIFlowTaskById ($id: ID!) {
+    task: allExecutionAIFlowTasks(
+        where: { id: $id }
+        first: 1
+    ) {
+        id
+        result
+        errorMessage
+        status
+        __typename
+    }
+}
+
+mutation createExecutionAIFlowTask ($data: ExecutionAIFlowTaskCreateInput!) {
+    task: createExecutionAIFlowTask(
+        data: $data
+    ) {
+        id
+        result
+        errorMessage
+        status
+    }
+}

apps/condo/domains/ai/schema/ExecutionAIFlowTask.js

@@ -10,15 +10,16 @@ const { historical, versioned, uuided, tracked, softDeleted, dvAndSender } = req
 const { GQLListSchema } = require('@open-condo/keystone/schema')
 const { extractReqLocale } = require('@open-condo/locales/extractReqLocale')
 
+
 const access = require('@condo/domains/ai/access/ExecutionAIFlowTask')
 const {
     TASK_STATUSES,
     FLOW_TYPES_LIST,
-    CUSTOM_FLOW_TYPES_LIST,
     FLOW_META_SCHEMAS,
     CUSTOM_FLOW_TYPE,
 } = require('@condo/domains/ai/constants')
 const { executeAIFlow } = require('@condo/domains/ai/tasks')
+const { CUSTOM_FLOW_TYPES_LIST } = require('@condo/domains/ai/utils/flowsConfig')
 const { WRONG_VALUE } = require('@condo/domains/common/constants/errors')
 const { LOCALES } = require('@condo/domains/user/constants/common')
 const { RedisGuard } = require('@condo/domains/user/utils/serverSchema/guards')
@@ -38,8 +39,6 @@ try {
     EXECUTION_AI_FLOW_TASK_CUSTOM_RATE_LIMITER = {}
 }
 
-const redisGuard = new RedisGuard()
-
 const ERRORS = {
     UNKNOWN_FLOW_TYPE: {
         mutation: 'createExecutionAIFlowTask',
@@ -75,6 +74,8 @@ const ERRORS = {
     },
 }
 
+const redisGuard = new RedisGuard()
+
 const ajv = new Ajv()
 
 const ExecutionAIFlowTask = new GQLListSchema('ExecutionAIFlowTask', {
@@ -261,4 +262,5 @@ const ExecutionAIFlowTask = new GQLListSchema('ExecutionAIFlowTask', {
 
 module.exports = {
     ExecutionAIFlowTask,
+    ERRORS,
 }

apps/condo/domains/ai/tasks/executeAIFlow.js

@@ -9,15 +9,13 @@ const { FlowiseAdapter } = require('@condo/domains/ai/adapters')
 const {
     TASK_STATUSES,
     FLOW_ADAPTERS: FLOW_ADAPTER_NAMES,
-    AI_FLOWS_CONFIG,
-    CUSTOM_FLOW_TYPES_LIST,
 } = require('@condo/domains/ai/constants')
+const { CUSTOM_FLOW_TYPES_LIST, AI_FLOWS_CONFIG } = require('@condo/domains/ai/utils/flowsConfig')
 const { ExecutionAIFlowTask } = require('@condo/domains/ai/utils/serverSchema')
 const { TASK_WORKER_FINGERPRINT } = require('@condo/domains/common/constants/tasks')
 
 const { FLOW_META_SCHEMAS, CUSTOM_FLOW_TYPE } = require('../constants')
 
-
 const BASE_ATTRIBUTES = { dv: 1, sender: { dv: 1, fingerprint: TASK_WORKER_FINGERPRINT } }
 
 const FLOW_ADAPTERS = {