From fc9867cc4c9c241df9a69ccc611076fb48a2dd98 Mon Sep 17 00:00:00 2001
From: kevinkim-ogp <kevinkim@open.gov.sg>
Date: Thu, 20 Nov 2025 22:34:26 +0800
Subject: [PATCH 01/14] feat: chat feedback

---
 package-lock.json                             |  25 ++++
 packages/backend/src/helpers/csp.ts           |   3 +
 packages/frontend/package.json                |   1 +
 packages/frontend/src/config/app.ts           |  12 ++
 .../components/ChatMessages/ChatMessage.tsx   |   2 +-
 .../ChatMessages/ChatMessageToolbar.tsx       | 119 ++++++++++++++++--
 6 files changed, 149 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 91db78b798..79379e1e85 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25274,6 +25274,30 @@
         "zod": "^3.25.0 || ^4.0.0"
       }
     },
+    "node_modules/langfuse": {
+      "version": "3.38.6",
+      "resolved": "https://registry.npmjs.org/langfuse/-/langfuse-3.38.6.tgz",
+      "integrity": "sha512-mtwfsNGIYvObRh+NYNGlJQJDiBN+Wr3Hnr++wN25mxuOpSTdXX+JQqVCyAqGL5GD2TAXRZ7COsN42Vmp9krYmg==",
+      "license": "MIT",
+      "dependencies": {
+        "langfuse-core": "^3.38.6"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/langfuse-core": {
+      "version": "3.38.6",
+      "resolved": "https://registry.npmjs.org/langfuse-core/-/langfuse-core-3.38.6.tgz",
+      "integrity": "sha512-EcZXa+DK9FJdi1I30+u19eKjuBJ04du6j2Nybk19KKCuraLczg/ppkTQcGvc4QOk//OAi3qUHrajUuV74RXsBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mustache": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/langium": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/langium/-/langium-3.3.1.tgz",
@@ -38502,6 +38526,7 @@
         "dedent": "1.5.1",
         "escape-html": "1.0.3",
         "file-saver": "2.0.5",
+        "langfuse": "3.38.6",
         "lens-widget": "^1.37.0",
         "lodash": "^4.17.21",
         "lottie-web": "5.12.2",
diff --git a/packages/backend/src/helpers/csp.ts b/packages/backend/src/helpers/csp.ts
index 97cf02640f..ac3d615751 100644
--- a/packages/backend/src/helpers/csp.ts
+++ b/packages/backend/src/helpers/csp.ts
@@ -19,6 +19,9 @@ const helmetOptions: HelmetOptions = {
         'https://rum-proxy.plumber.gov.sg',
         // For Lens Survey
         'https://lens.open.gov.sg',
+        // For Pair Rome and Istanbul
+        'https://istanbul.pair.gov.sg',
+        'https://rome.pair.gov.sg',
         // For S3 bucket
         'https://plumber-uat-attachment-bucket-private-0d9400e.s3.ap-southeast-1.amazonaws.com',
         'https://plumber-staging-attachment-bucket-private-ab28487.s3.ap-southeast-1.amazonaws.com',
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 34cfde29d7..e8fd1e3d39 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -41,6 +41,7 @@
     "dedent": "1.5.1",
     "escape-html": "1.0.3",
     "file-saver": "2.0.5",
+    "langfuse": "3.38.6",
     "lens-widget": "^1.37.0",
     "lodash": "^4.17.21",
     "lottie-web": "5.12.2",
diff --git a/packages/frontend/src/config/app.ts b/packages/frontend/src/config/app.ts
index d5d6b780d3..305eef72a5 100644
--- a/packages/frontend/src/config/app.ts
+++ b/packages/frontend/src/config/app.ts
@@ -7,6 +7,8 @@ interface AppConfig {
   lensSurveyClientKey: string
   ssoClientId: string
   ssoHostname: string
+  pairRomeBaseUrl: string
+  pairRomePublicKey: string
 }
 
 function getAppConfig(): AppConfig {
@@ -28,6 +30,8 @@ function getAppConfig(): AppConfig {
         lensSurveyClientKey: 'cm85ca2f300053ooz4vydrmyw',
         ssoClientId: 'plumber-prod',
         ssoHostname: 'https://sso.open.gov.sg',
+        pairRomeBaseUrl: 'https://rome.pair.gov.sg',
+        pairRomePublicKey: '', // TODO: add public key
         ...commonEnv,
       }
     // UAT and staging differ for the lens survey client key only
@@ -39,6 +43,8 @@ function getAppConfig(): AppConfig {
         lensSurveyClientKey: 'cm8fp8i030008zm2tbuc07xe5',
         ssoClientId: 'plumber-uat',
         ssoHostname: 'https://sso.open.gov.sg',
+        pairRomeBaseUrl: 'https://rome.pair.gov.sg',
+        pairRomePublicKey: '', // TODO: add public key
         ...commonEnv,
       }
     case 'staging':
@@ -49,6 +55,9 @@ function getAppConfig(): AppConfig {
         lensSurveyClientKey: 'cm86psst900052orfqetz3gz5',
         ssoClientId: 'plumber-staging',
         ssoHostname: 'https://sso.open.gov.sg',
+        // TODO: update to use Rome when ready
+        pairRomeBaseUrl: 'https://istanbul.pair.gov.sg',
+        pairRomePublicKey: 'pk-lf-3874d01f-530f-42f9-afd7-ea46d1bcfac3',
         ...commonEnv,
       }
     default:
@@ -59,6 +68,9 @@ function getAppConfig(): AppConfig {
         lensSurveyClientKey: 'cm8fpeah2000gzm2t572lhfti',
         ssoClientId: 'plumber-local',
         ssoHostname: 'http://localhost:5354',
+        // TODO: update to use Rome when ready
+        pairRomeBaseUrl: 'https://istanbul.pair.gov.sg',
+        pairRomePublicKey: 'pk-lf-3874d01f-530f-42f9-afd7-ea46d1bcfac3',
         ...commonEnv,
       }
   }
diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessage.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessage.tsx
index b9c6439b0b..dc2087c8c4 100644
--- a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessage.tsx
+++ b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessage.tsx
@@ -18,7 +18,7 @@ const AiMessage = ({ message }: ChatMessageProps) => {
         <ChakraStreamdown isAnimating={false}>
           {message.text || ''}
         </ChakraStreamdown>
-        <ChatMessageToolbar />
+        <ChatMessageToolbar traceId={message.traceId || ''} />
       </Box>
     </Flex>
   )
diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
index 6549315f95..84a93f7c97 100644
--- a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
+++ b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
@@ -1,5 +1,31 @@
+import React, { useState } from 'react'
 import { FaRegThumbsDown } from 'react-icons/fa'
-import { Flex, Icon, IconButton, Tooltip } from '@chakra-ui/react'
+import {
+  Button,
+  ButtonGroup,
+  Flex,
+  FocusLock,
+  FormControl,
+  FormLabel,
+  Icon,
+  IconButton,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Stack,
+  Textarea,
+  useDisclosure,
+} from '@chakra-ui/react'
+import { LangfuseWeb } from 'langfuse'
+
+import appConfig from '@/config/app'
+
+const langfuse = new LangfuseWeb({
+  baseUrl: appConfig.pairRomeBaseUrl,
+  publicKey: appConfig.pairRomePublicKey,
+})
 
 const DEFAULT_BUTTON_PROPS = {
   size: 'xs',
@@ -8,21 +34,90 @@ const DEFAULT_BUTTON_PROPS = {
   _hover: { color: 'gray.700', bg: 'gray.100' },
 }
 
-export default function ChatMessageToolbar() {
-  const handleThumbsDown = () => {
-    // TODO: Implement feedback functionality
+interface ChatMessageToolbarProps {
+  traceId: string
+}
+
+export default function ChatMessageToolbar({
+  traceId,
+}: ChatMessageToolbarProps) {
+  const { onOpen, onClose, isOpen } = useDisclosure()
+  const firstFieldRef = React.useRef(null)
+  const [comment, setComment] = useState('')
+
+  const handleSubmitFeedback = (comment: string) => {
+    try {
+      if (!traceId) {
+        return
+      }
+
+      // Send feedback to Rome / Istanbul
+      langfuse.score({
+        traceId,
+        id: `user-feedback-${traceId}`,
+        name: 'user-feedback',
+        value: 0, // 1 for positive, 0 for negative
+        comment,
+      })
+    } catch (error) {
+      console.error('Error submitting feedback:', error)
+    } finally {
+      onClose()
+    }
   }
 
   return (
     <Flex gap={1} mt={2}>
-      <Tooltip label="Not helpful" placement="top">
-        <IconButton
-          {...DEFAULT_BUTTON_PROPS}
-          aria-label="Thumbs down"
-          icon={<Icon as={FaRegThumbsDown} />}
-          onClick={handleThumbsDown}
-        />
-      </Tooltip>
+      <Popover
+        isOpen={isOpen}
+        initialFocusRef={firstFieldRef}
+        onOpen={onOpen}
+        onClose={onClose}
+      >
+        <PopoverTrigger>
+          <IconButton
+            {...DEFAULT_BUTTON_PROPS}
+            aria-label="Thumbs down"
+            icon={<Icon as={FaRegThumbsDown} />}
+            onClick={onOpen}
+          />
+        </PopoverTrigger>
+        <PopoverContent>
+          <FocusLock persistentFocus={false}>
+            <PopoverArrow />
+
+            <PopoverBody>
+              <Stack spacing={4}>
+                <FormControl>
+                  <FormLabel htmlFor="why-not-helpful">
+                    Why was this not helpful?
+                  </FormLabel>
+                  <Textarea
+                    ref={firstFieldRef}
+                    id="why-not-helpful"
+                    rows={3}
+                    resize="none"
+                    value={comment}
+                    onChange={(e) => setComment(e.target.value)}
+                  />
+                </FormControl>
+                <ButtonGroup display="flex" justifyContent="flex-end">
+                  <Button variant="outline" onClick={onClose}>
+                    Cancel
+                  </Button>
+                  <Button
+                    isDisabled={!comment}
+                    colorScheme="teal"
+                    onClick={() => handleSubmitFeedback(comment)}
+                  >
+                    Submit feedback
+                  </Button>
+                </ButtonGroup>
+              </Stack>
+            </PopoverBody>
+          </FocusLock>
+        </PopoverContent>
+      </Popover>
     </Flex>
   )
 }

From c5df122b53f467bda696d00fac2461fa01564fbf Mon Sep 17 00:00:00 2001
From: kevinkim-ogp <kevinkim@open.gov.sg>
Date: Thu, 20 Nov 2025 22:42:56 +0800
Subject: [PATCH 02/14] chore: clear comment after submit

---
 .../AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
index 84a93f7c97..e30ec0859e 100644
--- a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
+++ b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
@@ -63,6 +63,7 @@ export default function ChatMessageToolbar({
       console.error('Error submitting feedback:', error)
     } finally {
       onClose()
+      setComment('')
     }
   }
 

From 2abaa4b9a82bccbfde56fd04f48ef772ac595bb3 Mon Sep 17 00:00:00 2001
From: kevinkim-ogp <kevinkim@open.gov.sg>
Date: Thu, 20 Nov 2025 22:48:26 +0800
Subject: [PATCH 03/14] chore: update button variant and colour

---
 .../components/ChatMessages/ChatMessageToolbar.tsx     | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
index e30ec0859e..cb25d9ec82 100644
--- a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
+++ b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
@@ -27,13 +27,6 @@ const langfuse = new LangfuseWeb({
   publicKey: appConfig.pairRomePublicKey,
 })
 
-const DEFAULT_BUTTON_PROPS = {
-  size: 'xs',
-  variant: 'clear',
-  color: 'gray.500',
-  _hover: { color: 'gray.700', bg: 'gray.100' },
-}
-
 interface ChatMessageToolbarProps {
   traceId: string
 }
@@ -77,7 +70,8 @@ export default function ChatMessageToolbar({
       >
         <PopoverTrigger>
           <IconButton
-            {...DEFAULT_BUTTON_PROPS}
+            variant="clear"
+            colorScheme="secondary"
             aria-label="Thumbs down"
             icon={<Icon as={FaRegThumbsDown} />}
             onClick={onOpen}

From afcff793f10674cd441bb511c8d199a7e5d63366 Mon Sep 17 00:00:00 2001
From: kevinkim-ogp <kevinkim@open.gov.sg>
Date: Thu, 20 Nov 2025 23:11:41 +0800
Subject: [PATCH 04/14] fix: incorrect istanbul public key

---
 packages/frontend/src/config/app.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/config/app.ts b/packages/frontend/src/config/app.ts
index 305eef72a5..9fef79ce73 100644
--- a/packages/frontend/src/config/app.ts
+++ b/packages/frontend/src/config/app.ts
@@ -57,7 +57,7 @@ function getAppConfig(): AppConfig {
         ssoHostname: 'https://sso.open.gov.sg',
         // TODO: update to use Rome when ready
         pairRomeBaseUrl: 'https://istanbul.pair.gov.sg',
-        pairRomePublicKey: 'pk-lf-3874d01f-530f-42f9-afd7-ea46d1bcfac3',
+        pairRomePublicKey: 'pk-lf-1f6acb1e-85c0-4af7-bea7-6f465f7c0141',
         ...commonEnv,
       }
     default:
@@ -70,7 +70,7 @@ function getAppConfig(): AppConfig {
         ssoHostname: 'http://localhost:5354',
         // TODO: update to use Rome when ready
         pairRomeBaseUrl: 'https://istanbul.pair.gov.sg',
-        pairRomePublicKey: 'pk-lf-3874d01f-530f-42f9-afd7-ea46d1bcfac3',
+        pairRomePublicKey: 'pk-lf-1f6acb1e-85c0-4af7-bea7-6f465f7c0141',
         ...commonEnv,
       }
   }

From 9f0f5c1895df6ce6a0aa35cac1c9907c31f1cf6b Mon Sep 17 00:00:00 2001
From: kevinkim-ogp <kevinkim@open.gov.sg>
Date: Thu, 20 Nov 2025 23:42:03 +0800
Subject: [PATCH 05/14] refactor: send feedback via backend

---
 package-lock.json                             | 25 -----------
 packages/backend/src/helpers/csp.ts           |  3 --
 .../backend/src/routes/api/chat-feedback.ts   | 45 +++++++++++++++++++
 packages/backend/src/routes/api/index.ts      |  2 +
 packages/frontend/package.json                |  1 -
 packages/frontend/src/config/app.ts           | 12 -----
 .../ChatMessages/ChatMessageToolbar.tsx       | 29 +++++-------
 7 files changed, 58 insertions(+), 59 deletions(-)
 create mode 100644 packages/backend/src/routes/api/chat-feedback.ts

diff --git a/package-lock.json b/package-lock.json
index 79379e1e85..91db78b798 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25274,30 +25274,6 @@
         "zod": "^3.25.0 || ^4.0.0"
       }
     },
-    "node_modules/langfuse": {
-      "version": "3.38.6",
-      "resolved": "https://registry.npmjs.org/langfuse/-/langfuse-3.38.6.tgz",
-      "integrity": "sha512-mtwfsNGIYvObRh+NYNGlJQJDiBN+Wr3Hnr++wN25mxuOpSTdXX+JQqVCyAqGL5GD2TAXRZ7COsN42Vmp9krYmg==",
-      "license": "MIT",
-      "dependencies": {
-        "langfuse-core": "^3.38.6"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/langfuse-core": {
-      "version": "3.38.6",
-      "resolved": "https://registry.npmjs.org/langfuse-core/-/langfuse-core-3.38.6.tgz",
-      "integrity": "sha512-EcZXa+DK9FJdi1I30+u19eKjuBJ04du6j2Nybk19KKCuraLczg/ppkTQcGvc4QOk//OAi3qUHrajUuV74RXsBQ==",
-      "license": "MIT",
-      "dependencies": {
-        "mustache": "^4.2.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/langium": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/langium/-/langium-3.3.1.tgz",
@@ -38526,7 +38502,6 @@
         "dedent": "1.5.1",
         "escape-html": "1.0.3",
         "file-saver": "2.0.5",
-        "langfuse": "3.38.6",
         "lens-widget": "^1.37.0",
         "lodash": "^4.17.21",
         "lottie-web": "5.12.2",
diff --git a/packages/backend/src/helpers/csp.ts b/packages/backend/src/helpers/csp.ts
index ac3d615751..97cf02640f 100644
--- a/packages/backend/src/helpers/csp.ts
+++ b/packages/backend/src/helpers/csp.ts
@@ -19,9 +19,6 @@ const helmetOptions: HelmetOptions = {
         'https://rum-proxy.plumber.gov.sg',
         // For Lens Survey
         'https://lens.open.gov.sg',
-        // For Pair Rome and Istanbul
-        'https://istanbul.pair.gov.sg',
-        'https://rome.pair.gov.sg',
         // For S3 bucket
         'https://plumber-uat-attachment-bucket-private-0d9400e.s3.ap-southeast-1.amazonaws.com',
         'https://plumber-staging-attachment-bucket-private-ab28487.s3.ap-southeast-1.amazonaws.com',
diff --git a/packages/backend/src/routes/api/chat-feedback.ts b/packages/backend/src/routes/api/chat-feedback.ts
new file mode 100644
index 0000000000..c489137e4e
--- /dev/null
+++ b/packages/backend/src/routes/api/chat-feedback.ts
@@ -0,0 +1,45 @@
+import type { Request, Response } from 'express'
+import { Router } from 'express'
+
+import { langfuseClient } from '@/helpers/langfuse'
+import logger from '@/helpers/logger'
+
+import { getAuthenticatedContext } from './middleware/authentication'
+
+interface ChatFeedbackRequest {
+  traceId: string
+  feedback: string
+}
+
+const handleChatFeedback = async (
+  req: Request,
+  res: Response,
+): Promise<void> => {
+  const context = getAuthenticatedContext(req)
+
+  try {
+    const { traceId, feedback } = req.body as ChatFeedbackRequest
+
+    if (!traceId || !feedback) {
+      res.status(400).json({ error: 'Trace ID and feedback are required' })
+    }
+
+    langfuseClient.score.create({
+      traceId,
+      id: `feedback-${traceId}-${context.currentUser.email}`,
+      name: 'user-feedback',
+      value: 0, // 1 for positive, 0 for negative
+      comment: feedback,
+    })
+    res.status(200).json({ success: true })
+  } catch (error) {
+    logger.error('Error submitting ai builder chat feedback:', error)
+    res.status(400).json({ error: 'Failed to submit feedback' })
+  }
+}
+
+const router = Router()
+
+router.post('/', handleChatFeedback)
+
+export default router
diff --git a/packages/backend/src/routes/api/index.ts b/packages/backend/src/routes/api/index.ts
index 0d42c386f4..d9b8913acd 100644
--- a/packages/backend/src/routes/api/index.ts
+++ b/packages/backend/src/routes/api/index.ts
@@ -5,6 +5,7 @@ import {
   setCurrentUserContext,
 } from './middleware/authentication'
 import chatRouter from './chat'
+import chatFeedbackRouter from './chat-feedback'
 
 const router = Router()
 
@@ -15,6 +16,7 @@ router.use(requireAuthentication)
 
 // Mount individual API routes
 router.use('/chat', chatRouter)
+router.use('/chat-feedback', chatFeedbackRouter)
 
 // Future routes can be added here:
 // router.use('/users', usersRouter)
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index e8fd1e3d39..34cfde29d7 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -41,7 +41,6 @@
     "dedent": "1.5.1",
     "escape-html": "1.0.3",
     "file-saver": "2.0.5",
-    "langfuse": "3.38.6",
     "lens-widget": "^1.37.0",
     "lodash": "^4.17.21",
     "lottie-web": "5.12.2",
diff --git a/packages/frontend/src/config/app.ts b/packages/frontend/src/config/app.ts
index 9fef79ce73..d5d6b780d3 100644
--- a/packages/frontend/src/config/app.ts
+++ b/packages/frontend/src/config/app.ts
@@ -7,8 +7,6 @@ interface AppConfig {
   lensSurveyClientKey: string
   ssoClientId: string
   ssoHostname: string
-  pairRomeBaseUrl: string
-  pairRomePublicKey: string
 }
 
 function getAppConfig(): AppConfig {
@@ -30,8 +28,6 @@ function getAppConfig(): AppConfig {
         lensSurveyClientKey: 'cm85ca2f300053ooz4vydrmyw',
         ssoClientId: 'plumber-prod',
         ssoHostname: 'https://sso.open.gov.sg',
-        pairRomeBaseUrl: 'https://rome.pair.gov.sg',
-        pairRomePublicKey: '', // TODO: add public key
         ...commonEnv,
       }
     // UAT and staging differ for the lens survey client key only
@@ -43,8 +39,6 @@ function getAppConfig(): AppConfig {
         lensSurveyClientKey: 'cm8fp8i030008zm2tbuc07xe5',
         ssoClientId: 'plumber-uat',
         ssoHostname: 'https://sso.open.gov.sg',
-        pairRomeBaseUrl: 'https://rome.pair.gov.sg',
-        pairRomePublicKey: '', // TODO: add public key
         ...commonEnv,
       }
     case 'staging':
@@ -55,9 +49,6 @@ function getAppConfig(): AppConfig {
         lensSurveyClientKey: 'cm86psst900052orfqetz3gz5',
         ssoClientId: 'plumber-staging',
         ssoHostname: 'https://sso.open.gov.sg',
-        // TODO: update to use Rome when ready
-        pairRomeBaseUrl: 'https://istanbul.pair.gov.sg',
-        pairRomePublicKey: 'pk-lf-1f6acb1e-85c0-4af7-bea7-6f465f7c0141',
         ...commonEnv,
       }
     default:
@@ -68,9 +59,6 @@ function getAppConfig(): AppConfig {
         lensSurveyClientKey: 'cm8fpeah2000gzm2t572lhfti',
         ssoClientId: 'plumber-local',
         ssoHostname: 'http://localhost:5354',
-        // TODO: update to use Rome when ready
-        pairRomeBaseUrl: 'https://istanbul.pair.gov.sg',
-        pairRomePublicKey: 'pk-lf-1f6acb1e-85c0-4af7-bea7-6f465f7c0141',
         ...commonEnv,
       }
   }
diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
index cb25d9ec82..a24c1f6474 100644
--- a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
+++ b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
@@ -18,14 +18,6 @@ import {
   Textarea,
   useDisclosure,
 } from '@chakra-ui/react'
-import { LangfuseWeb } from 'langfuse'
-
-import appConfig from '@/config/app'
-
-const langfuse = new LangfuseWeb({
-  baseUrl: appConfig.pairRomeBaseUrl,
-  publicKey: appConfig.pairRomePublicKey,
-})
 
 interface ChatMessageToolbarProps {
   traceId: string
@@ -38,22 +30,23 @@ export default function ChatMessageToolbar({
   const firstFieldRef = React.useRef(null)
   const [comment, setComment] = useState('')
 
-  const handleSubmitFeedback = (comment: string) => {
+  const handleSubmitFeedback = async (comment: string) => {
     try {
       if (!traceId) {
         return
       }
 
-      // Send feedback to Rome / Istanbul
-      langfuse.score({
-        traceId,
-        id: `user-feedback-${traceId}`,
-        name: 'user-feedback',
-        value: 0, // 1 for positive, 0 for negative
-        comment,
+      // NOTE: we send feedback to the backend instead of using Langfuse directly
+      // as there are additional headers required to call Rome/Istanbul endpoints
+      // that should not be exposed to the frontend
+      await fetch('/api/chat-feedback', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ traceId, feedback: comment }),
       })
-    } catch (error) {
-      console.error('Error submitting feedback:', error)
+    } catch {
+      // don't throw error if feedback submission fails
+      // as it is not critical to the user experience
     } finally {
       onClose()
       setComment('')

From 9db2d68ed7759979dbf98eb7287a2710bed90664 Mon Sep 17 00:00:00 2001
From: kevinkim-ogp <kevinkim@open.gov.sg>
Date: Thu, 20 Nov 2025 23:50:10 +0800
Subject: [PATCH 06/14] chore: add environment

---
 packages/backend/src/routes/api/chat-feedback.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/backend/src/routes/api/chat-feedback.ts b/packages/backend/src/routes/api/chat-feedback.ts
index c489137e4e..b6048559e1 100644
--- a/packages/backend/src/routes/api/chat-feedback.ts
+++ b/packages/backend/src/routes/api/chat-feedback.ts
@@ -1,6 +1,7 @@
 import type { Request, Response } from 'express'
 import { Router } from 'express'
 
+import appConfig from '@/config/app'
 import { langfuseClient } from '@/helpers/langfuse'
 import logger from '@/helpers/logger'
 
@@ -27,6 +28,7 @@ const handleChatFeedback = async (
     langfuseClient.score.create({
       traceId,
       id: `feedback-${traceId}-${context.currentUser.email}`,
+      environment: appConfig.appEnv,
       name: 'user-feedback',
       value: 0, // 1 for positive, 0 for negative
       comment: feedback,

From 18f85e0e869d63c3a5473f40de9498cb9f0ada11 Mon Sep 17 00:00:00 2001
From: kevinkim-ogp <kevinkim@open.gov.sg>
Date: Sat, 22 Nov 2025 00:26:09 +0800
Subject: [PATCH 07/14] chore: add toast on submit feedback

---
 .../components/ChatMessages/ChatMessageToolbar.tsx       | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
index a24c1f6474..1b84605085 100644
--- a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
+++ b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
@@ -18,6 +18,7 @@ import {
   Textarea,
   useDisclosure,
 } from '@chakra-ui/react'
+import { useToast } from '@opengovsg/design-system-react'
 
 interface ChatMessageToolbarProps {
   traceId: string
@@ -27,6 +28,7 @@ export default function ChatMessageToolbar({
   traceId,
 }: ChatMessageToolbarProps) {
   const { onOpen, onClose, isOpen } = useDisclosure()
+  const toast = useToast()
   const firstFieldRef = React.useRef(null)
   const [comment, setComment] = useState('')
 
@@ -50,6 +52,13 @@ export default function ChatMessageToolbar({
     } finally {
       onClose()
       setComment('')
+      toast({
+        title: "Thank you! We've sent your feeback to the Plumber team.",
+        status: 'success',
+        duration: 3000,
+        isClosable: true,
+        position: 'top',
+      })
     }
   }
 

From 6ca071628cb4c6627eb2d7418a617ac37e7417c6 Mon Sep 17 00:00:00 2001
From: kevinkim-ogp <kevinkim@open.gov.sg>
Date: Mon, 1 Dec 2025 14:54:35 +0800
Subject: [PATCH 08/14] refactor feedback api

---
 .../src/routes/api/{chat-feedback.ts => chat/feedback.ts}      | 2 +-
 packages/backend/src/routes/api/chat/index.ts                  | 3 +++
 packages/backend/src/routes/api/index.ts                       | 2 --
 .../AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx   | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)
 rename packages/backend/src/routes/api/{chat-feedback.ts => chat/feedback.ts} (94%)

diff --git a/packages/backend/src/routes/api/chat-feedback.ts b/packages/backend/src/routes/api/chat/feedback.ts
similarity index 94%
rename from packages/backend/src/routes/api/chat-feedback.ts
rename to packages/backend/src/routes/api/chat/feedback.ts
index b6048559e1..ef7a8f198f 100644
--- a/packages/backend/src/routes/api/chat-feedback.ts
+++ b/packages/backend/src/routes/api/chat/feedback.ts
@@ -5,7 +5,7 @@ import appConfig from '@/config/app'
 import { langfuseClient } from '@/helpers/langfuse'
 import logger from '@/helpers/logger'
 
-import { getAuthenticatedContext } from './middleware/authentication'
+import { getAuthenticatedContext } from '../middleware/authentication'
 
 interface ChatFeedbackRequest {
   traceId: string
diff --git a/packages/backend/src/routes/api/chat/index.ts b/packages/backend/src/routes/api/chat/index.ts
index 62b95bb221..92771baf4c 100644
--- a/packages/backend/src/routes/api/chat/index.ts
+++ b/packages/backend/src/routes/api/chat/index.ts
@@ -11,6 +11,8 @@ import { getPrompt } from '@/helpers/pair/get-prompt'
 
 import { getAuthenticatedContext } from '../middleware/authentication'
 
+import chatFeedbackRouter from './feedback'
+
 interface ChatRequest {
   messages: Array<{
     role: 'user' | 'assistant' | 'system'
@@ -172,5 +174,6 @@ async function handleChatStream(req: Request, res: Response) {
 const router = Router()
 
 router.post('/', handleChatStream)
+router.use('/feedback', chatFeedbackRouter)
 
 export default router
diff --git a/packages/backend/src/routes/api/index.ts b/packages/backend/src/routes/api/index.ts
index d9b8913acd..0d42c386f4 100644
--- a/packages/backend/src/routes/api/index.ts
+++ b/packages/backend/src/routes/api/index.ts
@@ -5,7 +5,6 @@ import {
   setCurrentUserContext,
 } from './middleware/authentication'
 import chatRouter from './chat'
-import chatFeedbackRouter from './chat-feedback'
 
 const router = Router()
 
@@ -16,7 +15,6 @@ router.use(requireAuthentication)
 
 // Mount individual API routes
 router.use('/chat', chatRouter)
-router.use('/chat-feedback', chatFeedbackRouter)
 
 // Future routes can be added here:
 // router.use('/users', usersRouter)
diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
index 1b84605085..d85d8bbdb7 100644
--- a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
+++ b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
@@ -41,7 +41,7 @@ export default function ChatMessageToolbar({
       // NOTE: we send feedback to the backend instead of using Langfuse directly
       // as there are additional headers required to call Rome/Istanbul endpoints
       // that should not be exposed to the frontend
-      await fetch('/api/chat-feedback', {
+      await fetch('/api/chat/feedback', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ traceId, feedback: comment }),

From ac05f00d5d13f8ab4f10e37d018b1ad6ad5cecb3 Mon Sep 17 00:00:00 2001
From: kevinkim-ogp <kevinkim@open.gov.sg>
Date: Mon, 1 Dec 2025 14:54:45 +0800
Subject: [PATCH 09/14] chore: do not reset feedback

---
 .../AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
index d85d8bbdb7..390e2f9b97 100644
--- a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
+++ b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
@@ -50,8 +50,10 @@ export default function ChatMessageToolbar({
       // don't throw error if feedback submission fails
       // as it is not critical to the user experience
     } finally {
+      // NOTE: do not reset comment here
+      // so that user will see what they previously typed or submitted
+      // if they attempt to submit again
       onClose()
-      setComment('')
       toast({
         title: "Thank you! We've sent your feeback to the Plumber team.",
         status: 'success',

From 225274b7249108ff12f30f2d69fbc1494ecaaca6 Mon Sep 17 00:00:00 2001
From: kevinkim-ogp <kevinkim@open.gov.sg>
Date: Mon, 1 Dec 2025 15:24:24 +0800
Subject: [PATCH 10/14] refactor: add positive feedback

---
 .../backend/src/routes/api/chat/feedback.ts   |   5 +-
 .../ChatMessages/ChatMessageToolbar.tsx       | 136 ++++++++++--------
 2 files changed, 79 insertions(+), 62 deletions(-)

diff --git a/packages/backend/src/routes/api/chat/feedback.ts b/packages/backend/src/routes/api/chat/feedback.ts
index ef7a8f198f..b39fc9a465 100644
--- a/packages/backend/src/routes/api/chat/feedback.ts
+++ b/packages/backend/src/routes/api/chat/feedback.ts
@@ -10,6 +10,7 @@ import { getAuthenticatedContext } from '../middleware/authentication'
 interface ChatFeedbackRequest {
   traceId: string
   feedback: string
+  score: number
 }
 
 const handleChatFeedback = async (
@@ -19,7 +20,7 @@ const handleChatFeedback = async (
   const context = getAuthenticatedContext(req)
 
   try {
-    const { traceId, feedback } = req.body as ChatFeedbackRequest
+    const { traceId, feedback, score } = req.body as ChatFeedbackRequest
 
     if (!traceId || !feedback) {
       res.status(400).json({ error: 'Trace ID and feedback are required' })
@@ -30,7 +31,7 @@ const handleChatFeedback = async (
       id: `feedback-${traceId}-${context.currentUser.email}`,
       environment: appConfig.appEnv,
       name: 'user-feedback',
-      value: 0, // 1 for positive, 0 for negative
+      value: score, // 1 for positive, 0 for negative
       comment: feedback,
     })
     res.status(200).json({ success: true })
diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
index 390e2f9b97..44a1f1c9b7 100644
--- a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
+++ b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { FaRegThumbsDown } from 'react-icons/fa'
+import React, { useRef, useState } from 'react'
+import { FaRegThumbsDown, FaRegThumbsUp } from 'react-icons/fa'
 import {
   Button,
   ButtonGroup,
@@ -24,13 +24,23 @@ interface ChatMessageToolbarProps {
   traceId: string
 }
 
-export default function ChatMessageToolbar({
-  traceId,
-}: ChatMessageToolbarProps) {
+interface FeedbackButtonProps {
+  feedbackType: 'positive' | 'negative'
+  traceId: string
+}
+
+const FeedbackButton = ({ feedbackType, traceId }: FeedbackButtonProps) => {
   const { onOpen, onClose, isOpen } = useDisclosure()
+  const firstFieldRef = useRef(null)
   const toast = useToast()
-  const firstFieldRef = React.useRef(null)
-  const [comment, setComment] = useState('')
+  const icon = feedbackType === 'positive' ? FaRegThumbsUp : FaRegThumbsDown
+  const formLabel =
+    feedbackType === 'positive'
+      ? 'What was helpful about this?'
+      : 'Why was this not helpful?'
+  const score = feedbackType === 'positive' ? 1 : 0
+
+  const [feedback, setFeedback] = useState('')
 
   const handleSubmitFeedback = async (comment: string) => {
     try {
@@ -44,7 +54,7 @@ export default function ChatMessageToolbar({
       await fetch('/api/chat/feedback', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ traceId, feedback: comment }),
+        body: JSON.stringify({ traceId, feedback, score }),
       })
     } catch {
       // don't throw error if feedback submission fails
@@ -55,7 +65,7 @@ export default function ChatMessageToolbar({
       // if they attempt to submit again
       onClose()
       toast({
-        title: "Thank you! We've sent your feeback to the Plumber team.",
+        title: "Thank you! We've sent your feedback to the Plumber team.",
         status: 'success',
         duration: 3000,
         isClosable: true,
@@ -65,58 +75,64 @@ export default function ChatMessageToolbar({
   }
 
   return (
-    <Flex gap={1} mt={2}>
-      <Popover
-        isOpen={isOpen}
-        initialFocusRef={firstFieldRef}
-        onOpen={onOpen}
-        onClose={onClose}
-      >
-        <PopoverTrigger>
-          <IconButton
-            variant="clear"
-            colorScheme="secondary"
-            aria-label="Thumbs down"
-            icon={<Icon as={FaRegThumbsDown} />}
-            onClick={onOpen}
-          />
-        </PopoverTrigger>
-        <PopoverContent>
-          <FocusLock persistentFocus={false}>
-            <PopoverArrow />
+    <Popover
+      isOpen={isOpen}
+      initialFocusRef={firstFieldRef}
+      onOpen={onOpen}
+      onClose={onClose}
+    >
+      <PopoverTrigger>
+        <IconButton
+          variant="clear"
+          colorScheme="secondary"
+          aria-label="Thumbs down"
+          icon={<Icon as={icon} />}
+          onClick={onOpen}
+        />
+      </PopoverTrigger>
+      <PopoverContent>
+        <FocusLock persistentFocus={false}>
+          <PopoverArrow />
 
-            <PopoverBody>
-              <Stack spacing={4}>
-                <FormControl>
-                  <FormLabel htmlFor="why-not-helpful">
-                    Why was this not helpful?
-                  </FormLabel>
-                  <Textarea
-                    ref={firstFieldRef}
-                    id="why-not-helpful"
-                    rows={3}
-                    resize="none"
-                    value={comment}
-                    onChange={(e) => setComment(e.target.value)}
-                  />
-                </FormControl>
-                <ButtonGroup display="flex" justifyContent="flex-end">
-                  <Button variant="outline" onClick={onClose}>
-                    Cancel
-                  </Button>
-                  <Button
-                    isDisabled={!comment}
-                    colorScheme="teal"
-                    onClick={() => handleSubmitFeedback(comment)}
-                  >
-                    Submit feedback
-                  </Button>
-                </ButtonGroup>
-              </Stack>
-            </PopoverBody>
-          </FocusLock>
-        </PopoverContent>
-      </Popover>
+          <PopoverBody>
+            <Stack spacing={4}>
+              <FormControl>
+                <FormLabel htmlFor="feedback-details">{formLabel}</FormLabel>
+                <Textarea
+                  ref={firstFieldRef}
+                  id="feedback-details"
+                  rows={3}
+                  resize="none"
+                  value={feedback}
+                  onChange={(e) => setFeedback(e.target.value)}
+                />
+              </FormControl>
+              <ButtonGroup display="flex" justifyContent="flex-end">
+                <Button variant="outline" onClick={onClose}>
+                  Cancel
+                </Button>
+                <Button
+                  isDisabled={!feedback}
+                  onClick={() => handleSubmitFeedback(feedback)}
+                >
+                  Submit
+                </Button>
+              </ButtonGroup>
+            </Stack>
+          </PopoverBody>
+        </FocusLock>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default function ChatMessageToolbar({
+  traceId,
+}: ChatMessageToolbarProps) {
+  return (
+    <Flex gap={1} mt={2}>
+      <FeedbackButton feedbackType="negative" traceId={traceId} />
+      <FeedbackButton feedbackType="positive" traceId={traceId} />
     </Flex>
   )
 }

From 306b27594c76de3bec3dde1beaa6413120df2c1e Mon Sep 17 00:00:00 2001
From: kevinkim-ogp <kevinkim@open.gov.sg>
Date: Mon, 1 Dec 2025 17:45:00 +0800
Subject: [PATCH 11/14] refactor: use Form, add dropdown

---
 .../backend/src/routes/api/chat/feedback.ts   |  10 +-
 .../ChatMessages/ChatMessageToolbar.tsx       | 169 ++++++++++++++----
 2 files changed, 139 insertions(+), 40 deletions(-)

diff --git a/packages/backend/src/routes/api/chat/feedback.ts b/packages/backend/src/routes/api/chat/feedback.ts
index b39fc9a465..51782f25c7 100644
--- a/packages/backend/src/routes/api/chat/feedback.ts
+++ b/packages/backend/src/routes/api/chat/feedback.ts
@@ -9,7 +9,10 @@ import { getAuthenticatedContext } from '../middleware/authentication'
 
 interface ChatFeedbackRequest {
   traceId: string
-  feedback: string
+  feedback: {
+    category?: string
+    comment?: string
+  }
   score: number
 }
 
@@ -32,7 +35,10 @@ const handleChatFeedback = async (
       environment: appConfig.appEnv,
       name: 'user-feedback',
       value: score, // 1 for positive, 0 for negative
-      comment: feedback,
+      comment: feedback.comment,
+      ...(feedback?.category && {
+        metadata: { category: feedback.category },
+      }),
     })
     res.status(200).json({ success: true })
   } catch (error) {
diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
index 44a1f1c9b7..6676dcdec2 100644
--- a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
+++ b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import { Controller, useFormContext } from 'react-hook-form'
 import { FaRegThumbsDown, FaRegThumbsUp } from 'react-icons/fa'
 import {
   Button,
@@ -20,6 +20,14 @@ import {
 } from '@chakra-ui/react'
 import { useToast } from '@opengovsg/design-system-react'
 
+import Form from '@/components/Form'
+import { SingleSelect } from '@/components/SingleSelect'
+
+interface FeedbackFormData {
+  'feedback-dropdown'?: string
+  'feedback-details': string
+}
+
 interface ChatMessageToolbarProps {
   traceId: string
 }
@@ -29,20 +37,97 @@ interface FeedbackButtonProps {
   traceId: string
 }
 
+const FEEDBACK_POPOVER_DETAILS = {
+  positive: {
+    dropdownLabel: null,
+    dropdownOptions: null,
+    textAreaLabel:
+      'Provide details on what was satisfying about this response:',
+    textAreaPlaceholder: 'What was satisfying about this response?',
+    score: 1,
+  },
+  negative: {
+    dropdownLabel: 'What type of issue do you wish to report?',
+    dropdownOptions: [
+      'Incorrect workflow generated',
+      'Incomplete response',
+      'UI bug',
+      "I don't understand the response",
+      'Other',
+    ],
+    textAreaLabel: 'Provide details on what was wrong with this response:',
+    textAreaPlaceholder: 'What was wrong with this response?',
+    score: 0,
+  },
+}
+
+const FeedbackFormContent = ({
+  dropdownLabel,
+  dropdownOptions,
+  textAreaLabel,
+  textAreaPlaceholder,
+  autoFocus,
+}: {
+  dropdownLabel: string | null
+  dropdownOptions: string[] | null
+  textAreaLabel: string
+  textAreaPlaceholder: string
+  autoFocus?: boolean
+}) => {
+  const { control, register } = useFormContext<FeedbackFormData>()
+
+  return (
+    <Flex direction="column">
+      {dropdownLabel != null && dropdownOptions != null && (
+        <>
+          <FormLabel htmlFor="feedback-dropdown" mt={2}>
+            {dropdownLabel}
+          </FormLabel>
+          <Controller
+            name="feedback-dropdown"
+            control={control}
+            defaultValue=""
+            render={({ field }) => (
+              <SingleSelect
+                colorScheme="secondary"
+                name="feedback-dropdown"
+                items={dropdownOptions}
+                value={field.value ?? ''}
+                onChange={field.onChange}
+                isClearable={false}
+              />
+            )}
+          />
+        </>
+      )}
+      <FormLabel htmlFor="feedback-details" mt={2}>
+        {textAreaLabel}
+      </FormLabel>
+      <Textarea
+        id="feedback-details"
+        rows={3}
+        resize="none"
+        autoFocus={autoFocus}
+        placeholder={textAreaPlaceholder}
+        {...register('feedback-details')}
+      />
+    </Flex>
+  )
+}
+
 const FeedbackButton = ({ feedbackType, traceId }: FeedbackButtonProps) => {
   const { onOpen, onClose, isOpen } = useDisclosure()
-  const firstFieldRef = useRef(null)
   const toast = useToast()
   const icon = feedbackType === 'positive' ? FaRegThumbsUp : FaRegThumbsDown
-  const formLabel =
-    feedbackType === 'positive'
-      ? 'What was helpful about this?'
-      : 'Why was this not helpful?'
-  const score = feedbackType === 'positive' ? 1 : 0
-
-  const [feedback, setFeedback] = useState('')
+  const {
+    dropdownLabel,
+    dropdownOptions,
+    textAreaLabel,
+    textAreaPlaceholder,
+    score,
+  } = FEEDBACK_POPOVER_DETAILS[feedbackType]
 
-  const handleSubmitFeedback = async (comment: string) => {
+  const handleSubmitFeedback = async (data: FeedbackFormData) => {
     try {
       if (!traceId) {
         return
@@ -54,13 +139,20 @@ const FeedbackButton = ({ feedbackType, traceId }: FeedbackButtonProps) => {
       await fetch('/api/chat/feedback', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ traceId, feedback, score }),
+        body: JSON.stringify({
+          traceId,
+          feedback: {
+            category: data['feedback-dropdown'],
+            comment: data['feedback-details'],
+          },
+          score,
+        }),
       })
     } catch {
       // don't throw error if feedback submission fails
       // as it is not critical to the user experience
     } finally {
-      // NOTE: do not reset comment here
+      // NOTE: do not reset form here
       // so that user will see what they previously typed or submitted
       // if they attempt to submit again
       onClose()
@@ -77,9 +169,9 @@ const FeedbackButton = ({ feedbackType, traceId }: FeedbackButtonProps) => {
   return (
     <Popover
       isOpen={isOpen}
-      initialFocusRef={firstFieldRef}
       onOpen={onOpen}
       onClose={onClose}
+      placement="top-start"
     >
       <PopoverTrigger>
         <IconButton
@@ -94,31 +186,32 @@ const FeedbackButton = ({ feedbackType, traceId }: FeedbackButtonProps) => {
         <FocusLock persistentFocus={false}>
           <PopoverArrow />
 
-          <PopoverBody>
-            <Stack spacing={4}>
-              <FormControl>
-                <FormLabel htmlFor="feedback-details">{formLabel}</FormLabel>
-                <Textarea
-                  ref={firstFieldRef}
-                  id="feedback-details"
-                  rows={3}
-                  resize="none"
-                  value={feedback}
-                  onChange={(e) => setFeedback(e.target.value)}
-                />
-              </FormControl>
-              <ButtonGroup display="flex" justifyContent="flex-end">
-                <Button variant="outline" onClick={onClose}>
-                  Cancel
-                </Button>
-                <Button
-                  isDisabled={!feedback}
-                  onClick={() => handleSubmitFeedback(feedback)}
-                >
-                  Submit
-                </Button>
-              </ButtonGroup>
-            </Stack>
+          <PopoverBody p={4}>
+            <Form
+              onSubmit={(data) =>
+                handleSubmitFeedback(data as FeedbackFormData)
+              }
+            >
+              <Stack spacing={4}>
+                <FormControl>
+                  <FeedbackFormContent
+                    dropdownLabel={dropdownLabel}
+                    dropdownOptions={dropdownOptions}
+                    textAreaLabel={textAreaLabel}
+                    textAreaPlaceholder={textAreaPlaceholder}
+                    autoFocus={feedbackType === 'positive'}
+                  />
+                </FormControl>
+                <ButtonGroup display="flex" justifyContent="flex-end">
+                  <Button variant="clear" onClick={onClose} size="sm">
+                    Cancel
+                  </Button>
+                  <Button type="submit" size="sm">
+                    Submit
+                  </Button>
+                </ButtonGroup>
+              </Stack>
+            </Form>
           </PopoverBody>
         </FocusLock>
       </PopoverContent>

From b18d283e91963e3efd22def5a1fd5c23b1056779 Mon Sep 17 00:00:00 2001
From: kevinkim-ogp <kevinkim@open.gov.sg>
Date: Thu, 4 Dec 2025 21:56:24 +0800
Subject: [PATCH 12/14] fix: do not autofocus on feedback button

---
 .../AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
index 6676dcdec2..7c44f4072e 100644
--- a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
+++ b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
@@ -180,6 +180,8 @@ const FeedbackButton = ({ feedbackType, traceId }: FeedbackButtonProps) => {
           aria-label="Thumbs down"
           icon={<Icon as={icon} />}
           onClick={onOpen}
+          // HACKFIX(kevinkim-ogp): prevent autofocus when new input is sent
+          tabIndex={-1}
         />
       </PopoverTrigger>
       <PopoverContent>

From 8c2c43f263f9a1144e3b61de038e16edd81efb0a Mon Sep 17 00:00:00 2001
From: kevinkim-ogp <kevinkim@open.gov.sg>
Date: Mon, 8 Dec 2025 21:16:08 +0800
Subject: [PATCH 13/14] refactor: use graphql for feedback

---
 .../backend/src/graphql/mutation-resolvers.ts |  6 +--
 .../backend/src/graphql/mutations/ai/index.ts | 11 ++++
 .../mutations/ai/update-chat-feedback.ts      | 35 ++++++++++++
 packages/backend/src/graphql/schema.graphql   |  7 +++
 .../backend/src/routes/api/chat/feedback.ts   | 54 -------------------
 packages/backend/src/routes/api/chat/index.ts |  3 --
 .../mutations/ai/update-chat-feedback.ts      |  7 +++
 7 files changed, 62 insertions(+), 61 deletions(-)
 create mode 100644 packages/backend/src/graphql/mutations/ai/index.ts
 create mode 100644 packages/backend/src/graphql/mutations/ai/update-chat-feedback.ts
 delete mode 100644 packages/backend/src/routes/api/chat/feedback.ts
 create mode 100644 packages/frontend/src/graphql/mutations/ai/update-chat-feedback.ts

diff --git a/packages/backend/src/graphql/mutation-resolvers.ts b/packages/backend/src/graphql/mutation-resolvers.ts
index 16d23e7c1d..256743c2cb 100644
--- a/packages/backend/src/graphql/mutation-resolvers.ts
+++ b/packages/backend/src/graphql/mutation-resolvers.ts
@@ -1,6 +1,5 @@
 import type { MutationResolvers } from './__generated__/types.generated'
-import generateAiSteps from './mutations/ai/generate-ai-steps'
-import refineFormInput from './mutations/ai/refine-form-input'
+import aiMutationResolvers from './mutations/ai'
 import bulkRetryExecutions from './mutations/bulk-retry-executions'
 import bulkRetryIterations from './mutations/bulk-retry-iterations'
 import createConnection from './mutations/create-connection'
@@ -61,8 +60,6 @@ export default {
   bulkRetryIterations,
   createConnection,
   generateAuthUrl,
-  generateAiSteps,
-  refineFormInput,
   updateConnection,
   resetConnection,
   verifyConnection,
@@ -97,6 +94,7 @@ export default {
   deleteUploadedFile,
   generatePresignedPost,
   ...tilesMutationResolvers,
+  ...aiMutationResolvers,
 
   // This is a special stub that enables us to group all our admin-related
   // mutations into a special AdminMutation object; each "mutation" is handled by field
diff --git a/packages/backend/src/graphql/mutations/ai/index.ts b/packages/backend/src/graphql/mutations/ai/index.ts
new file mode 100644
index 0000000000..1a76a7d7bc
--- /dev/null
+++ b/packages/backend/src/graphql/mutations/ai/index.ts
@@ -0,0 +1,11 @@
+import type { MutationResolvers } from '../../__generated__/types.generated'
+
+import generateAiSteps from './generate-ai-steps'
+import refineFormInput from './refine-form-input'
+import updateChatFeedback from './update-chat-feedback'
+
+export default {
+  generateAiSteps,
+  refineFormInput,
+  updateChatFeedback,
+} satisfies MutationResolvers
diff --git a/packages/backend/src/graphql/mutations/ai/update-chat-feedback.ts b/packages/backend/src/graphql/mutations/ai/update-chat-feedback.ts
new file mode 100644
index 0000000000..97afaba4ec
--- /dev/null
+++ b/packages/backend/src/graphql/mutations/ai/update-chat-feedback.ts
@@ -0,0 +1,35 @@
+import appConfig from '@/config/app'
+import { langfuseClient } from '@/helpers/langfuse'
+import logger from '@/helpers/logger'
+
+import { MutationResolvers } from '../../__generated__/types.generated'
+
+const updateChatFeedback: MutationResolvers['updateChatFeedback'] = async (
+  _parent,
+  params,
+  context,
+) => {
+  const { traceId, feedback, score } = params.input
+
+  try {
+    langfuseClient.score.create({
+      traceId,
+      id: `feedback-${traceId}-${context.currentUser.email}`,
+      environment: appConfig.appEnv,
+      name: 'user-feedback',
+      value: score, // 1 for positive, 0 for negative
+      comment: feedback.comment as string,
+      ...(feedback?.category && {
+        metadata: { category: feedback.category },
+      }),
+    })
+
+    return true
+  } catch (error) {
+    logger.error('Failed to update chat feedback', { error })
+    // we don't throw because it doesn't stop the user from using the chat
+    return false
+  }
+}
+
+export default updateChatFeedback
diff --git a/packages/backend/src/graphql/schema.graphql b/packages/backend/src/graphql/schema.graphql
index 0fed93f492..28733a1ea0 100644
--- a/packages/backend/src/graphql/schema.graphql
+++ b/packages/backend/src/graphql/schema.graphql
@@ -134,6 +134,7 @@ type Mutation {
   # Ai builder mutations
   generateAiSteps(input: GenerateAiStepsInput!): JSONObject
   refineFormInput(input: RefineFormInputInput!): JSONObject
+  updateChatFeedback(input: UpdateChatFeedbackInput!): Boolean!
   # Admin mutations
   admin: AdminMutation!
 }
@@ -149,6 +150,12 @@ input RefineFormInputInput {
   sessionId: String
 }
 
+input UpdateChatFeedbackInput {
+  traceId: String!
+  feedback: JSONObject
+  score: Int!
+}
+
 type StepInput {
   type: StepEnumType!
   appKey: String!
diff --git a/packages/backend/src/routes/api/chat/feedback.ts b/packages/backend/src/routes/api/chat/feedback.ts
deleted file mode 100644
index 51782f25c7..0000000000
--- a/packages/backend/src/routes/api/chat/feedback.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { Request, Response } from 'express'
-import { Router } from 'express'
-
-import appConfig from '@/config/app'
-import { langfuseClient } from '@/helpers/langfuse'
-import logger from '@/helpers/logger'
-
-import { getAuthenticatedContext } from '../middleware/authentication'
-
-interface ChatFeedbackRequest {
-  traceId: string
-  feedback: {
-    category?: string
-    comment?: string
-  }
-  score: number
-}
-
-const handleChatFeedback = async (
-  req: Request,
-  res: Response,
-): Promise<void> => {
-  const context = getAuthenticatedContext(req)
-
-  try {
-    const { traceId, feedback, score } = req.body as ChatFeedbackRequest
-
-    if (!traceId || !feedback) {
-      res.status(400).json({ error: 'Trace ID and feedback are required' })
-    }
-
-    langfuseClient.score.create({
-      traceId,
-      id: `feedback-${traceId}-${context.currentUser.email}`,
-      environment: appConfig.appEnv,
-      name: 'user-feedback',
-      value: score, // 1 for positive, 0 for negative
-      comment: feedback.comment,
-      ...(feedback?.category && {
-        metadata: { category: feedback.category },
-      }),
-    })
-    res.status(200).json({ success: true })
-  } catch (error) {
-    logger.error('Error submitting ai builder chat feedback:', error)
-    res.status(400).json({ error: 'Failed to submit feedback' })
-  }
-}
-
-const router = Router()
-
-router.post('/', handleChatFeedback)
-
-export default router
diff --git a/packages/backend/src/routes/api/chat/index.ts b/packages/backend/src/routes/api/chat/index.ts
index 92771baf4c..62b95bb221 100644
--- a/packages/backend/src/routes/api/chat/index.ts
+++ b/packages/backend/src/routes/api/chat/index.ts
@@ -11,8 +11,6 @@ import { getPrompt } from '@/helpers/pair/get-prompt'
 
 import { getAuthenticatedContext } from '../middleware/authentication'
 
-import chatFeedbackRouter from './feedback'
-
 interface ChatRequest {
   messages: Array<{
     role: 'user' | 'assistant' | 'system'
@@ -174,6 +172,5 @@ async function handleChatStream(req: Request, res: Response) {
 const router = Router()
 
 router.post('/', handleChatStream)
-router.use('/feedback', chatFeedbackRouter)
 
 export default router
diff --git a/packages/frontend/src/graphql/mutations/ai/update-chat-feedback.ts b/packages/frontend/src/graphql/mutations/ai/update-chat-feedback.ts
new file mode 100644
index 0000000000..2d051cae57
--- /dev/null
+++ b/packages/frontend/src/graphql/mutations/ai/update-chat-feedback.ts
@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client'
+
+export const UPDATE_CHAT_FEEDBACK = gql`
+  mutation updateChatFeedback($input: UpdateChatFeedbackInput!) {
+    updateChatFeedback(input: $input)
+  }
+`

From ab18168a305b04bee12277d966ebabe2e1431af1 Mon Sep 17 00:00:00 2001
From: kevinkim-ogp <kevinkim@open.gov.sg>
Date: Mon, 8 Dec 2025 21:16:19 +0800
Subject: [PATCH 14/14] refactor ChatMessageToolbar

---
 .../FeedbackButton.tsx}                       | 129 +++---------------
 .../FeedbackFormContent.tsx                   |  65 +++++++++
 .../ChatMessageToolbar/constants.ts           |  23 ++++
 .../ChatMessages/ChatMessageToolbar/index.tsx |  18 +++
 4 files changed, 126 insertions(+), 109 deletions(-)
 rename packages/frontend/src/pages/AiBuilder/components/ChatMessages/{ChatMessageToolbar.tsx => ChatMessageToolbar/FeedbackButton.tsx} (53%)
 create mode 100644 packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar/FeedbackFormContent.tsx
 create mode 100644 packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar/constants.ts
 create mode 100644 packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar/index.tsx

diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar/FeedbackButton.tsx
similarity index 53%
rename from packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
rename to packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar/FeedbackButton.tsx
index 7c44f4072e..fe513ab429 100644
--- a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar.tsx
+++ b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar/FeedbackButton.tsx
@@ -1,12 +1,10 @@
-import { Controller, useFormContext } from 'react-hook-form'
 import { FaRegThumbsDown, FaRegThumbsUp } from 'react-icons/fa'
+import { useMutation } from '@apollo/client'
 import {
   Button,
   ButtonGroup,
-  Flex,
   FocusLock,
   FormControl,
-  FormLabel,
   Icon,
   IconButton,
   Popover,
@@ -15,110 +13,34 @@ import {
   PopoverContent,
   PopoverTrigger,
   Stack,
-  Textarea,
   useDisclosure,
 } from '@chakra-ui/react'
 import { useToast } from '@opengovsg/design-system-react'
 
 import Form from '@/components/Form'
-import { SingleSelect } from '@/components/SingleSelect'
+import { UPDATE_CHAT_FEEDBACK } from '@/graphql/mutations/ai/update-chat-feedback'
+
+import { FEEDBACK_POPOVER_DETAILS } from './constants'
+import FeedbackFormContent from './FeedbackFormContent'
 
 interface FeedbackFormData {
   'feedback-dropdown'?: string
   'feedback-details': string
 }
 
-interface ChatMessageToolbarProps {
-  traceId: string
-}
-
 interface FeedbackButtonProps {
   feedbackType: 'positive' | 'negative'
   traceId: string
 }
 
-const FEEDBACK_POPOVER_DETAILS = {
-  positive: {
-    dropdownLabel: null,
-    dropdownOptions: null,
-    textAreaLabel:
-      'Provide details on what was satisfying about this response:',
-    textAreaPlaceholder: 'What was satisfying about this response?',
-    score: 1,
-  },
-  negative: {
-    dropdownLabel: 'What type of issue do you wish to report?',
-    dropdownOptions: [
-      'Incorrect workflow generated',
-      'Incomplete response',
-      'UI bug',
-      "I don't understand the response",
-      'Other',
-    ],
-    textAreaLabel: 'Provide details on what was wrong with this response:',
-    textAreaPlaceholder: 'What was wrong with this response?',
-    score: 0,
-  },
-}
-
-const FeedbackFormContent = ({
-  dropdownLabel,
-  dropdownOptions,
-  textAreaLabel,
-  textAreaPlaceholder,
-  autoFocus,
-}: {
-  dropdownLabel: string | null
-  dropdownOptions: string[] | null
-  textAreaLabel: string
-  textAreaPlaceholder: string
-  autoFocus?: boolean
-}) => {
-  const { control, register } = useFormContext<FeedbackFormData>()
-
-  return (
-    <Flex direction="column">
-      {dropdownLabel != null && dropdownOptions != null && (
-        <>
-          <FormLabel htmlFor="feedback-dropdown" mt={2}>
-            {dropdownLabel}
-          </FormLabel>
-          <Controller
-            name="feedback-dropdown"
-            control={control}
-            defaultValue=""
-            render={({ field }) => (
-              <SingleSelect
-                colorScheme="secondary"
-                name="feedback-dropdown"
-                items={dropdownOptions}
-                value={field.value ?? ''}
-                onChange={field.onChange}
-                isClearable={false}
-              />
-            )}
-          />
-        </>
-      )}
-      <FormLabel htmlFor="feedback-details" mt={2}>
-        {textAreaLabel}
-      </FormLabel>
-      <Textarea
-        id="feedback-details"
-        rows={3}
-        resize="none"
-        autoFocus={autoFocus}
-        placeholder={textAreaPlaceholder}
-        {...register('feedback-details')}
-      />
-    </Flex>
-  )
-}
-
-const FeedbackButton = ({ feedbackType, traceId }: FeedbackButtonProps) => {
+export const FeedbackButton = ({
+  feedbackType,
+  traceId,
+}: FeedbackButtonProps) => {
   const { onOpen, onClose, isOpen } = useDisclosure()
   const toast = useToast()
   const icon = feedbackType === 'positive' ? FaRegThumbsUp : FaRegThumbsDown
+  const [updateChatFeedback] = useMutation(UPDATE_CHAT_FEEDBACK)
   const {
     dropdownLabel,
     dropdownOptions,
@@ -136,17 +58,17 @@ const FeedbackButton = ({ feedbackType, traceId }: FeedbackButtonProps) => {
       // NOTE: we send feedback to the backend instead of using Langfuse directly
       // as there are additional headers required to call Rome/Istanbul endpoints
       // that should not be exposed to the frontend
-      await fetch('/api/chat/feedback', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          traceId,
-          feedback: {
-            category: data['feedback-dropdown'],
-            comment: data['feedback-details'],
+      await updateChatFeedback({
+        variables: {
+          input: {
+            traceId,
+            feedback: {
+              category: data['feedback-dropdown'],
+              comment: data['feedback-details'],
+            },
+            score,
           },
-          score,
-        }),
+        },
       })
     } catch {
       // don't throw error if feedback submission fails
@@ -220,14 +142,3 @@ const FeedbackButton = ({ feedbackType, traceId }: FeedbackButtonProps) => {
     </Popover>
   )
 }
-
-export default function ChatMessageToolbar({
-  traceId,
-}: ChatMessageToolbarProps) {
-  return (
-    <Flex gap={1} mt={2}>
-      <FeedbackButton feedbackType="negative" traceId={traceId} />
-      <FeedbackButton feedbackType="positive" traceId={traceId} />
-    </Flex>
-  )
-}
diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar/FeedbackFormContent.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar/FeedbackFormContent.tsx
new file mode 100644
index 0000000000..e43ee3bdba
--- /dev/null
+++ b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar/FeedbackFormContent.tsx
@@ -0,0 +1,65 @@
+import { Controller, useFormContext } from 'react-hook-form'
+import { Flex, FormLabel, Textarea } from '@chakra-ui/react'
+
+import { SingleSelect } from '@/components/SingleSelect'
+
+interface FeedbackFormData {
+  'feedback-dropdown'?: string
+  'feedback-details': string
+}
+
+const FeedbackFormContent = ({
+  dropdownLabel,
+  dropdownOptions,
+  textAreaLabel,
+  textAreaPlaceholder,
+  autoFocus,
+}: {
+  dropdownLabel: string | null
+  dropdownOptions: string[] | null
+  textAreaLabel: string
+  textAreaPlaceholder: string
+  autoFocus?: boolean
+}) => {
+  const { control, register } = useFormContext<FeedbackFormData>()
+
+  return (
+    <Flex direction="column">
+      {dropdownLabel != null && dropdownOptions != null && (
+        <>
+          <FormLabel htmlFor="feedback-dropdown" mt={2}>
+            {dropdownLabel}
+          </FormLabel>
+          <Controller
+            name="feedback-dropdown"
+            control={control}
+            defaultValue=""
+            render={({ field }) => (
+              <SingleSelect
+                colorScheme="secondary"
+                name="feedback-dropdown"
+                items={dropdownOptions}
+                value={field.value ?? ''}
+                onChange={field.onChange}
+                isClearable={false}
+              />
+            )}
+          />
+        </>
+      )}
+      <FormLabel htmlFor="feedback-details" mt={2}>
+        {textAreaLabel}
+      </FormLabel>
+      <Textarea
+        id="feedback-details"
+        rows={3}
+        resize="none"
+        autoFocus={autoFocus}
+        placeholder={textAreaPlaceholder}
+        {...register('feedback-details')}
+      />
+    </Flex>
+  )
+}
+
+export default FeedbackFormContent
diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar/constants.ts b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar/constants.ts
new file mode 100644
index 0000000000..82603b7495
--- /dev/null
+++ b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar/constants.ts
@@ -0,0 +1,23 @@
+export const FEEDBACK_POPOVER_DETAILS = {
+  positive: {
+    dropdownLabel: null,
+    dropdownOptions: null,
+    textAreaLabel:
+      'Provide details on what was satisfying about this response:',
+    textAreaPlaceholder: 'What was satisfying about this response?',
+    score: 1,
+  },
+  negative: {
+    dropdownLabel: 'What type of issue do you wish to report?',
+    dropdownOptions: [
+      'Incorrect workflow generated',
+      'Incomplete response',
+      'UI bug',
+      "I don't understand the response",
+      'Other',
+    ],
+    textAreaLabel: 'Provide details on what was wrong with this response:',
+    textAreaPlaceholder: 'What was wrong with this response?',
+    score: 0,
+  },
+}
diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar/index.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar/index.tsx
new file mode 100644
index 0000000000..cd7f32bc49
--- /dev/null
+++ b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/ChatMessageToolbar/index.tsx
@@ -0,0 +1,18 @@
+import { Flex } from '@chakra-ui/react'
+
+import { FeedbackButton } from './FeedbackButton'
+
+interface ChatMessageToolbarProps {
+  traceId: string
+}
+
+export default function ChatMessageToolbar({
+  traceId,
+}: ChatMessageToolbarProps) {
+  return (
+    <Flex gap={1} mt={2}>
+      <FeedbackButton feedbackType="negative" traceId={traceId} />
+      <FeedbackButton feedbackType="positive" traceId={traceId} />
+    </Flex>
+  )
+}