fix: prevent canvas scrollbar resize from shrinking agent workspace (#490)

This commit is contained in:
Wendong-Fan 2025-10-20 05:14:16 +08:00 committed by GitHub
commit 0f218f78b5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 29 additions and 21 deletions

View file

@ -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(

View file

@ -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>