diff --git a/src/components/ChatBox/index.tsx b/src/components/ChatBox/index.tsx
index 45d29ee6a..ee73bf1d6 100644
--- a/src/components/ChatBox/index.tsx
+++ b/src/components/ChatBox/index.tsx
@@ -294,10 +294,10 @@ export default function ChatBox(): JSX.Element {
 														onTyping={scrollToBottom}
 													/>
 													<div className="flex gap-2 flex-wrap">
-														{item.fileList?.map((file) => {
+														{item.fileList?.map((file, fileIndex) => {
 															return (
 																<div
-																	key={"file-" + file.name}
+																	key={`file-${item.id}-${fileIndex}-${file.name}`}
 																	onClick={() => {
 																		// set selected file
 																		chatStore.setSelectedFile(
@@ -376,10 +376,10 @@ export default function ChatBox(): JSX.Element {
 													onTyping={scrollToBottom}
 												/> */}
 												<div className="flex gap-2 flex-wrap">
-													{item.fileList?.map((file) => {
+													{item.fileList?.map((file, fileIndex) => {
 														return (
 															<div
-																key={"file-" + file.name}
+																key={`file-${item.id}-${fileIndex}-${file.name}`}
 																onClick={() => {
 																	// set selected file
 																	chatStore.setSelectedFile(
diff --git a/src/components/WorkFlow/index.tsx b/src/components/WorkFlow/index.tsx
index 9f0bdc564..42c013243 100644
--- a/src/components/WorkFlow/index.tsx
+++ b/src/components/WorkFlow/index.tsx
@@ -31,12 +31,14 @@ const nodeTypes: NodeTypes = {
 	node: (props: any) => <CustomNodeComponent {...props} />,
 };
 
+const VIEWPORT_ANIMATION_DURATION = 500;
+
 export default function Workflow({
 	taskAssigning,
 }: {
 	taskAssigning: Agent[];
 }) {
-	const {t} = useTranslation();
+	const { t } = useTranslation();
 	const chatStore = useChatStore();
 	const [isEditMode, setIsEditMode] = useState(false);
 	const [lastViewport, setLastViewport] = useState({ x: 0, y: 0, zoom: 1 });
@@ -245,7 +247,7 @@ export default function Workflow({
 						},
 						position: isEditMode
 							? node.position
-							: { x: index * (342+20) + 8, y: 16 },
+							: { x: index * (342 + 20) + 8, y: 16 },
 					};
 				} else {
 					return {
@@ -259,7 +261,7 @@ export default function Workflow({
 							isEditMode: isEditMode,
 							workerInfo: agent?.workerInfo,
 						},
-						position: { x: index * (342+20) + 8, y: 16 },
+						position: { x: index * (342 + 20) + 8, y: 16 },
 						type: "node",
 					};
 				}
@@ -293,6 +295,24 @@ export default function Workflow({
 		};
 	}, [getViewport, setViewport, isEditMode]);
 
+	const [isAnimating, setIsAnimating] = useState(false);
+	const moveViewport = (dx: number) => {
+		if (isAnimating) return;
+		const viewport = getViewport();
+		setIsAnimating(true);
+		// Prevent scrolling past x=0 (too far right) when moving left
+		const newX = dx > 0 ? Math.min(0, viewport.x + dx) : viewport.x + dx;
+		setViewport(
+			{ x: newX, y: viewport.y, zoom: viewport.zoom },
+			{
+				duration: VIEWPORT_ANIMATION_DURATION,
+			}
+		);
+		setTimeout(() => {
+			setIsAnimating(false);
+		}, VIEWPORT_ANIMATION_DURATION);
+	};
+
 	const handleShare = async (taskId: string) => {
 		share(taskId);
 	};
@@ -343,12 +363,7 @@ export default function Workflow({
 							variant="ghost"
 							size="icon"
 							onClick={() => {
-								const viewport = getViewport();
-								const newX = Math.min(0, viewport.x + 200);
-								setViewport(
-									{ x: newX, y: viewport.y, zoom: viewport.zoom },
-									{ duration: 500 }
-								);
+								moveViewport(200);
 							}}
 						>
 							<ChevronLeft className="w-4 h-4 text-icon-primary" />
@@ -356,14 +371,7 @@ export default function Workflow({
 						<Button
 							variant="ghost"
 							size="icon"
-							onClick={() => {
-								const viewport = getViewport();
-								const newX = viewport.x - 200;
-								setViewport(
-									{ x: newX, y: viewport.y, zoom: viewport.zoom },
-									{ duration: 500 }
-								);
-							}}
+							onClick={() => moveViewport(-200)}
 						>
 							<ChevronRight className="w-4 h-4 text-icon-primary" />
 						</Button>