diff --git a/packages/dify-ui/src/placement.ts b/packages/dify-ui/src/placement.ts
index 95f233fd56..bf5534c92d 100644
--- a/packages/dify-ui/src/placement.ts
+++ b/packages/dify-ui/src/placement.ts
@@ -19,11 +19,21 @@ export type Placement
     | 'left-start'
     | 'left-end'
 
-export function parsePlacement(placement: Placement): { side: Side, align: Align } {
-  const [side, align] = placement.split('-') as [Side, Align | undefined]
+const PLACEMENT_PARTS = {
+  'top': { side: 'top', align: 'center' },
+  'top-start': { side: 'top', align: 'start' },
+  'top-end': { side: 'top', align: 'end' },
+  'right': { side: 'right', align: 'center' },
+  'right-start': { side: 'right', align: 'start' },
+  'right-end': { side: 'right', align: 'end' },
+  'bottom': { side: 'bottom', align: 'center' },
+  'bottom-start': { side: 'bottom', align: 'start' },
+  'bottom-end': { side: 'bottom', align: 'end' },
+  'left': { side: 'left', align: 'center' },
+  'left-start': { side: 'left', align: 'start' },
+  'left-end': { side: 'left', align: 'end' },
+} satisfies Record<Placement, { side: Side, align: Align }>
 
-  return {
-    side,
-    align: align ?? 'center',
-  }
+export function parsePlacement(placement: Placement): { side: Side, align: Align } {
+  return PLACEMENT_PARTS[placement]
 }