diff --git a/web/app/components/workflow/comment/icon.tsx b/web/app/components/workflow/comment/comment-icon.tsx
similarity index 99%
rename from web/app/components/workflow/comment/icon.tsx
rename to web/app/components/workflow/comment/comment-icon.tsx
index c9fc5abd6a..0bced3a6e1 100644
--- a/web/app/components/workflow/comment/icon.tsx
+++ b/web/app/components/workflow/comment/comment-icon.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type { FC } from 'react'
 import { memo, useMemo } from 'react'
 import { useReactFlow, useViewport } from 'reactflow'
diff --git a/web/app/components/workflow/comment/index.tsx b/web/app/components/workflow/comment/index.tsx
index 656f768baa..f80ddac5bf 100644
--- a/web/app/components/workflow/comment/index.tsx
+++ b/web/app/components/workflow/comment/index.tsx
@@ -1,5 +1,5 @@
 export { CommentCursor } from './cursor'
 export { CommentInput } from './comment-input'
-export { CommentIcon } from './icon'
+export { CommentIcon } from './comment-icon'
 export { CommentThread } from './thread'
 export { MentionInput } from './mention-input'