From a7f65b58877e50c1398a2cc950ea8f322baa633f Mon Sep 17 00:00:00 2001
From: aliang <1098486429@qq.com>
Date: Sat, 9 Nov 2024 05:18:41 +0700
Subject: [PATCH] fix(ui): fix the error handling for thread editing (#3391)

* fix(webserver): forbid empty content message update

* fix(ui): fix the error handling for thread editing

---------

Co-authored-by: Wei Zhang <kweizh@tabbyml.com>
---
 .../components/assistant-message-section.tsx  | 28 +++++++++++--------
 ee/tabby-ui/app/search/components/search.tsx  | 16 +++++++----
 ee/tabby-ui/components/chat/chat.tsx          |  3 +-
 ee/tabby-ui/lib/hooks/use-thread-run.ts       |  8 +-----
 ee/tabby-ui/lib/tabby/gql.ts                  |  7 +++--
 ee/tabby-ui/lib/types/common.ts               |  8 ++++++
 6 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/ee/tabby-ui/app/search/components/assistant-message-section.tsx b/ee/tabby-ui/app/search/components/assistant-message-section.tsx
index a3b71adeb27c..44f5734ea53e 100644
--- a/ee/tabby-ui/app/search/components/assistant-message-section.tsx
+++ b/ee/tabby-ui/app/search/components/assistant-message-section.tsx
@@ -13,7 +13,12 @@ import * as z from 'zod'
 
 import { MARKDOWN_CITATION_REGEX } from '@/lib/constants/regex'
 import { MessageAttachmentCode } from '@/lib/gql/generates/graphql'
-import { AttachmentDocItem, RelevantCodeContext } from '@/lib/types'
+import { makeFormErrorHandler } from '@/lib/tabby/gql'
+import {
+  AttachmentDocItem,
+  ExtendedCombinedError,
+  RelevantCodeContext
+} from '@/lib/types'
 import {
   cn,
   formatLineHashForCodeBrowser,
@@ -207,9 +212,9 @@ export function AssistantMessageSection({
   }
 
   const handleUpdateAssistantMessage = async (message: ConversationMessage) => {
-    const errorMessage = await onUpdateMessage(message)
-    if (errorMessage) {
-      return errorMessage
+    const error = await onUpdateMessage(message)
+    if (error) {
+      return error
     } else {
       setIsEditing(false)
     }
@@ -518,7 +523,9 @@ function MessageContentForm({
 }: {
   message: ConversationMessage
   onCancel: () => void
-  onSubmit: (newMessage: ConversationMessage) => Promise<string | void>
+  onSubmit: (
+    newMessage: ConversationMessage
+  ) => Promise<ExtendedCombinedError | void>
 }) {
   const formSchema = z.object({
     content: z.string().trim()
@@ -528,17 +535,16 @@ function MessageContentForm({
     defaultValues: { content: message.content }
   })
   const { isSubmitting } = form.formState
-  const { content } = form.watch()
-  const isEmptyContent = !content || isEmpty(content.trim())
   const [draftMessage] = useState<ConversationMessage>(message)
 
   const handleSubmit = async (values: z.infer<typeof formSchema>) => {
-    const errorMessage = await onSubmit({
+    const error = await onSubmit({
       ...draftMessage,
       content: values.content
     })
-    if (errorMessage) {
-      form.setError('root', { message: errorMessage })
+
+    if (error) {
+      makeFormErrorHandler(form)(error)
     }
   }
 
@@ -576,7 +582,7 @@ function MessageContentForm({
             >
               Cancel
             </Button>
-            <Button type="submit" disabled={isEmptyContent || isSubmitting}>
+            <Button type="submit" disabled={isSubmitting}>
               {isSubmitting && (
                 <IconSpinner className="mr-2 h-4 w-4 animate-spin" />
               )}
diff --git a/ee/tabby-ui/app/search/components/search.tsx b/ee/tabby-ui/app/search/components/search.tsx
index adb54475d6f5..4baad4b3bda3 100644
--- a/ee/tabby-ui/app/search/components/search.tsx
+++ b/ee/tabby-ui/app/search/components/search.tsx
@@ -41,7 +41,7 @@ import { useMe } from '@/lib/hooks/use-me'
 import { useSelectedModel } from '@/lib/hooks/use-models'
 import useRouterStuff from '@/lib/hooks/use-router-stuff'
 import { useIsChatEnabled } from '@/lib/hooks/use-server-info'
-import { ExtendedCombinedError, useThreadRun } from '@/lib/hooks/use-thread-run'
+import { useThreadRun } from '@/lib/hooks/use-thread-run'
 import { updateSelectedModel } from '@/lib/stores/chat-actions'
 import { clearHomeScrollPosition } from '@/lib/stores/scroll-store'
 import { useMutation } from '@/lib/tabby/gql'
@@ -53,6 +53,7 @@ import {
 import {
   AttachmentCodeItem,
   AttachmentDocItem,
+  ExtendedCombinedError,
   ThreadRunContexts
 } from '@/lib/types'
 import {
@@ -116,7 +117,9 @@ type SearchContextValue = {
   fetchingContextInfo: boolean
   onDeleteMessage: (id: string) => void
   isThreadOwner: boolean
-  onUpdateMessage: (message: ConversationMessage) => Promise<string | undefined>
+  onUpdateMessage: (
+    message: ConversationMessage
+  ) => Promise<ExtendedCombinedError | undefined>
 }
 
 export const SearchContext = createContext<SearchContextValue>(
@@ -167,7 +170,9 @@ export function Search() {
 
   const updateThreadMessage = useMutation(updateThreadMessageMutation)
 
-  const onUpdateMessage = async (message: ConversationMessage) => {
+  const onUpdateMessage = async (
+    message: ConversationMessage
+  ): Promise<ExtendedCombinedError | undefined> => {
     const messageIndex = messages.findIndex(o => o.id === message.id)
     if (messageIndex > -1 && threadId) {
       // 1. call api
@@ -186,11 +191,10 @@ export function Search() {
           return newMessages
         })
       } else {
-        // FIXME error handling
-        return result?.error?.message || 'Failed to save'
+        return result?.error || new Error('Failed to save')
       }
     } else {
-      return 'Failed to save'
+      return new Error('Failed to save')
     }
   }
 
diff --git a/ee/tabby-ui/components/chat/chat.tsx b/ee/tabby-ui/components/chat/chat.tsx
index c67e6785bed3..6b52313e1a9e 100644
--- a/ee/tabby-ui/components/chat/chat.tsx
+++ b/ee/tabby-ui/components/chat/chat.tsx
@@ -12,8 +12,9 @@ import {
 } from '@/lib/gql/generates/graphql'
 import { useDebounceCallback } from '@/lib/hooks/use-debounce'
 import { useLatest } from '@/lib/hooks/use-latest'
-import { ExtendedCombinedError, useThreadRun } from '@/lib/hooks/use-thread-run'
+import { useThreadRun } from '@/lib/hooks/use-thread-run'
 import { filename2prism } from '@/lib/language-utils'
+import { ExtendedCombinedError } from '@/lib/types'
 import {
   AssistantMessage,
   MessageActionType,
diff --git a/ee/tabby-ui/lib/hooks/use-thread-run.ts b/ee/tabby-ui/lib/hooks/use-thread-run.ts
index ad6901806aab..eb97f860b70c 100644
--- a/ee/tabby-ui/lib/hooks/use-thread-run.ts
+++ b/ee/tabby-ui/lib/hooks/use-thread-run.ts
@@ -1,6 +1,4 @@
 import React from 'react'
-import { GraphQLError } from 'graphql'
-import { CombinedError } from 'urql'
 
 import { graphql } from '@/lib/gql/generates'
 
@@ -12,13 +10,9 @@ import {
   ThreadRunOptionsInput
 } from '../gql/generates/graphql'
 import { client, useMutation } from '../tabby/gql'
+import { ExtendedCombinedError } from '../types'
 import { useLatest } from './use-latest'
 
-export interface ExtendedCombinedError
-  extends Omit<CombinedError, 'graphQLErrors'> {
-  graphQLErrors?: GraphQLError[]
-}
-
 interface UseThreadRunOptions {
   onError?: (err: Error) => void
   threadId?: string
diff --git a/ee/tabby-ui/lib/tabby/gql.ts b/ee/tabby-ui/lib/tabby/gql.ts
index d00af6b735c0..faacd7ef063e 100644
--- a/ee/tabby-ui/lib/tabby/gql.ts
+++ b/ee/tabby-ui/lib/tabby/gql.ts
@@ -26,6 +26,7 @@ import {
   SourceIdAccessPoliciesQueryVariables,
   UpsertUserGroupMembershipInput
 } from '../gql/generates/graphql'
+import { ExtendedCombinedError } from '../types'
 import { refreshTokenMutation } from './auth'
 import {
   listIntegrations,
@@ -88,8 +89,10 @@ function useMutation<TResult, TVariables extends AnyVariables>(
   return fn
 }
 
-function makeFormErrorHandler<T extends FieldValues>(form: UseFormReturn<T>) {
-  return (err: CombinedError) => {
+export function makeFormErrorHandler<T extends FieldValues>(
+  form: UseFormReturn<T>
+) {
+  return (err: ExtendedCombinedError) => {
     const { graphQLErrors = [] } = err
     for (const error of graphQLErrors) {
       if (error.extensions && error.extensions['validation-errors']) {
diff --git a/ee/tabby-ui/lib/types/common.ts b/ee/tabby-ui/lib/types/common.ts
index 941f8242804e..8cb34c0f2a01 100644
--- a/ee/tabby-ui/lib/types/common.ts
+++ b/ee/tabby-ui/lib/types/common.ts
@@ -1,3 +1,6 @@
+import { GraphQLError } from 'graphql'
+import { CombinedError } from 'urql'
+
 export type ServerActionResult<Result> = Promise<
   | Result
   | {
@@ -7,3 +10,8 @@ export type ServerActionResult<Result> = Promise<
 
 // get element type from array type
 export type ArrayElementType<T> = T extends Array<infer T> ? T : never
+
+export interface ExtendedCombinedError
+  extends Omit<CombinedError, 'graphQLErrors'> {
+  graphQLErrors?: GraphQLError[]
+}