@eko-ai/eko 3.1.1 → 3.1.2-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"build_dom_tree.d.ts","sourceRoot":"","sources":["../../../src/agent/browser/build_dom_tree.ts"],"names":[],"mappings":"AACA,wBAAgB,kBAAkB,SAkwBjC"}
1
+ {"version":3,"file":"build_dom_tree.d.ts","sourceRoot":"","sources":["../../../src/agent/browser/build_dom_tree.ts"],"names":[],"mappings":"AACA,wBAAgB,kBAAkB,SAmxBjC"}
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/agent/browser/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,oBAAoB,CAClC,cAAc,SAAM,EACpB,kBAAkB,SAAQ,UAoH3B;AAED,wBAAgB,kCAAkC,CAChD,UAAU,EAAE;IACV,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,YAAY,GAAG,WAAW,CAAC;CACvC,EACD,QAAQ,EAAE,MAAM,CACd,MAAM,EACN;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CACxD,EACD,WAAW,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC7C,OAAO,CAAC,MAAM,CAAC,CAmGjB;AAED,wBAAsB,cAAc,CAClC,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,YAAY,GAAG,WAAW,EACrC,QAAQ,EACJ;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GACjB;IACE,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB,EACL,OAAO,GAAE,MAAU,GAClB,OAAO,CAAC;IACT,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,YAAY,GAAG,WAAW,CAAC;CACvC,CAAC,CA0CD"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/agent/browser/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,oBAAoB,CAClC,cAAc,SAAM,EACpB,kBAAkB,SAAQ,UAoH3B;AAED,wBAAgB,kCAAkC,CAChD,UAAU,EAAE;IACV,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,YAAY,GAAG,WAAW,CAAC;CACvC,EACD,QAAQ,EAAE,MAAM,CACd,MAAM,EACN;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CACxD,EACD,WAAW,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC7C,OAAO,CAAC,MAAM,CAAC,CA+GjB;AAED,wBAAsB,cAAc,CAClC,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,YAAY,GAAG,WAAW,EACrC,QAAQ,EACJ;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GACjB;IACE,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB,EACL,OAAO,GAAE,MAAU,GAClB,OAAO,CAAC;IACT,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,YAAY,GAAG,WAAW,CAAC;CACvC,CAAC,CA0CD"}
package/dist/index.cjs.js CHANGED
@@ -19,7 +19,7 @@ const config$1 = {
19
19
  maxDialogueImgFileNum: 1,
20
20
  toolResultMultimodal: true,
21
21
  parallelToolCalls: true,
22
- markImageMode: "dom",
22
+ markImageMode: "draw",
23
23
  expertMode: false,
24
24
  expertModeTodoLoopNum: 10,
25
25
  };
@@ -35152,7 +35152,7 @@ function mark_screenshot_highlight_elements(screenshot, area_map, client_rect) {
35152
35152
  .sort((a, b) => {
35153
35153
  const areaA = a[1].width * a[1].height;
35154
35154
  const areaB = b[1].width * b[1].height;
35155
- return areaA - areaB;
35155
+ return areaB - areaA;
35156
35156
  });
35157
35157
  const colors = [
35158
35158
  "#FF0000",
@@ -35170,6 +35170,11 @@ function mark_screenshot_highlight_elements(screenshot, area_map, client_rect) {
35170
35170
  ];
35171
35171
  sortedEntries.forEach(([id, area], index) => {
35172
35172
  const color = colors[index % colors.length];
35173
+ if (area.width * area.height < 40000) {
35174
+ // Draw a background color
35175
+ ctx.fillStyle = color + "1A";
35176
+ ctx.fillRect(area.x, area.y, area.width, area.height);
35177
+ }
35173
35178
  // Draw a border
35174
35179
  ctx.strokeStyle = color;
35175
35180
  ctx.lineWidth = 2;
@@ -35183,7 +35188,12 @@ function mark_screenshot_highlight_elements(screenshot, area_map, client_rect) {
35183
35188
  const labelHeight = fontSize + padding * 2;
35184
35189
  // The tag position is in the upper right corner.
35185
35190
  const labelX = area.x + area.width - labelWidth;
35186
- const labelY = area.y;
35191
+ let labelY = area.y;
35192
+ // Adjust if box is too small
35193
+ if (area.width < labelWidth + 4 || area.height < labelHeight + 4) {
35194
+ // Position outside the box if it's too small
35195
+ labelY = area.y - labelHeight;
35196
+ }
35187
35197
  // Draw label background
35188
35198
  ctx.fillStyle = color;
35189
35199
  ctx.fillRect(labelX, labelY, labelWidth, labelHeight);
@@ -35840,13 +35850,36 @@ function run_build_dom_tree() {
35840
35850
  interactiveRoles.has(ariaRole) ||
35841
35851
  (tabIndex !== null && tabIndex !== '-1') ||
35842
35852
  element.getAttribute('data-action') === 'a-dropdown-select' ||
35843
- element.getAttribute('data-action') === 'a-dropdown-button';
35853
+ element.getAttribute('data-action') === 'a-dropdown-button' ||
35854
+ element.getAttribute('contenteditable') === 'true';
35844
35855
  if (hasInteractiveRole)
35845
35856
  return true;
35846
- // Get computed style
35847
- const style = getCachedComputedStyle(element);
35848
- // Check if element has click-like styling
35849
- const hasClickStyling = style.cursor === 'pointer' || element.style.cursor === 'pointer';
35857
+ // const eventTypes = [
35858
+ // 'click',
35859
+ // 'mousedown',
35860
+ // 'mouseup',
35861
+ // 'touchstart',
35862
+ // 'touchend',
35863
+ // 'keydown',
35864
+ // 'keyup',
35865
+ // 'focus',
35866
+ // 'blur',
35867
+ // ];
35868
+ const clickEventTypes = [
35869
+ 'click',
35870
+ 'mousedown',
35871
+ 'mouseup',
35872
+ 'touchstart',
35873
+ 'touchend',
35874
+ ];
35875
+ // Filter elements that have no real event listeners at all
35876
+ if (window.getEventListeners) {
35877
+ const listeners = window.getEventListeners(element);
35878
+ const hasRealClickListeners = clickEventTypes.some((type) => listeners[type]?.length > 0);
35879
+ if (!hasRealClickListeners) {
35880
+ return false;
35881
+ }
35882
+ }
35850
35883
  // Check for event listeners
35851
35884
  const hasClickHandler = element.onclick !== null ||
35852
35885
  element.getAttribute('onclick') !== null ||
@@ -35854,24 +35887,10 @@ function run_build_dom_tree() {
35854
35887
  element.hasAttribute('@click') ||
35855
35888
  element.hasAttribute('v-on:click');
35856
35889
  // Helper function to safely get event listeners
35857
- function getEventListeners(el) {
35858
- // if (window.getEventListeners) {
35859
- // return window.getEventListeners?.(el) || {};
35860
- // }
35890
+ function getElementEventListeners(el) {
35861
35891
  // List of common event types to check
35862
35892
  const listeners = {};
35863
- const eventTypes = [
35864
- 'click',
35865
- 'mousedown',
35866
- 'mouseup',
35867
- 'touchstart',
35868
- 'touchend',
35869
- 'keydown',
35870
- 'keyup',
35871
- 'focus',
35872
- 'blur',
35873
- ];
35874
- for (const type of eventTypes) {
35893
+ for (const type of clickEventTypes) {
35875
35894
  const handler = el[`on${type}`];
35876
35895
  if (handler) {
35877
35896
  listeners[type] = [
@@ -35885,39 +35904,47 @@ function run_build_dom_tree() {
35885
35904
  return listeners;
35886
35905
  }
35887
35906
  // Check for click-related events on the element itself
35888
- const listeners = getEventListeners(element);
35889
- const hasClickListeners = listeners &&
35890
- (listeners.click?.length > 0 ||
35891
- listeners.mousedown?.length > 0 ||
35892
- listeners.mouseup?.length > 0 ||
35893
- listeners.touchstart?.length > 0 ||
35894
- listeners.touchend?.length > 0);
35907
+ const listeners = getElementEventListeners(element);
35908
+ const hasClickListeners = clickEventTypes.some((type) => listeners[type]?.length > 0);
35895
35909
  // Check for ARIA properties that suggest interactivity
35896
35910
  const hasAriaProps = element.hasAttribute('aria-expanded') ||
35897
35911
  element.hasAttribute('aria-pressed') ||
35898
35912
  element.hasAttribute('aria-selected') ||
35899
35913
  element.hasAttribute('aria-checked');
35900
- // Check for form-related functionality
35901
- element.form !== undefined ||
35902
- element.hasAttribute('contenteditable') ||
35903
- (style && style.userSelect !== 'none');
35904
35914
  // Check if element is draggable
35905
35915
  const isDraggable = element.draggable || element.getAttribute('draggable') === 'true';
35906
- return (hasAriaProps ||
35907
- hasClickStyling ||
35908
- hasClickHandler ||
35909
- hasClickListeners ||
35910
- // isFormRelated ||
35911
- isDraggable);
35916
+ if (hasAriaProps || hasClickHandler || hasClickListeners || isDraggable) {
35917
+ return true;
35918
+ }
35919
+ // Check if element has click-like styling
35920
+ let hasClickStyling = element.style.cursor === 'pointer' || getCachedComputedStyle(element).cursor === 'pointer';
35921
+ if (hasClickStyling) {
35922
+ let count = 0;
35923
+ let current = element.parentElement;
35924
+ while (current && current !== document.documentElement) {
35925
+ hasClickStyling = current.style.cursor === 'pointer' || getCachedComputedStyle(current).cursor === 'pointer';
35926
+ if (hasClickStyling)
35927
+ return false;
35928
+ current = current.parentElement;
35929
+ if (++count > 10)
35930
+ break;
35931
+ }
35932
+ return true;
35933
+ }
35934
+ return false;
35935
+ }
35936
+ // Helper function to check if element exists
35937
+ function isElementExist(element) {
35938
+ const style = getCachedComputedStyle(element);
35939
+ return (style?.visibility !== 'hidden' &&
35940
+ style?.display !== 'none');
35912
35941
  }
35913
35942
  // Helper function to check if element is visible
35914
35943
  function isElementVisible(element) {
35915
35944
  if (element.offsetWidth === 0 && element.offsetHeight === 0) {
35916
35945
  return false;
35917
35946
  }
35918
- const style = getCachedComputedStyle(element);
35919
- return (style?.visibility !== 'hidden' &&
35920
- style?.display !== 'none');
35947
+ return isElementExist(element);
35921
35948
  }
35922
35949
  // Helper function to check if element is the top element at its position
35923
35950
  function isTopElement(element) {
@@ -35938,11 +35965,14 @@ function run_build_dom_tree() {
35938
35965
  if (!topEl)
35939
35966
  return false;
35940
35967
  // Check if the element or any of its parents match our target element
35968
+ let count = 0;
35941
35969
  let current = topEl;
35942
35970
  while (current && current !== shadowRoot) {
35943
35971
  if (current === element)
35944
35972
  return true;
35945
35973
  current = current.parentElement;
35974
+ if (++count > 15)
35975
+ break;
35946
35976
  }
35947
35977
  return false;
35948
35978
  }
@@ -35957,11 +35987,14 @@ function run_build_dom_tree() {
35957
35987
  const topEl = document.elementFromPoint(point.x, point.y);
35958
35988
  if (!topEl)
35959
35989
  return false;
35990
+ let count = 0;
35960
35991
  let current = topEl;
35961
35992
  while (current && current !== document.documentElement) {
35962
35993
  if (current === element)
35963
35994
  return true;
35964
35995
  current = current.parentElement;
35996
+ if (++count > 15)
35997
+ break;
35965
35998
  }
35966
35999
  return false;
35967
36000
  }
@@ -36063,7 +36096,7 @@ function run_build_dom_tree() {
36063
36096
  }
36064
36097
  }
36065
36098
  else {
36066
- if (nodeData.isVisible != false) {
36099
+ if (isElementExist(node)) {
36067
36100
  const children = Array.from(node.childNodes).map((child) => buildDomTree(child, parentIframe));
36068
36101
  nodeData.children.push(...children);
36069
36102
  }
@@ -36507,7 +36540,7 @@ class BaseBrowserLabelsAgent extends BaseBrowserAgent {
36507
36540
  ];
36508
36541
  }
36509
36542
  async double_screenshots(agentContext, messages, tools) {
36510
- return config$1.mode != "fast";
36543
+ return config$1.mode == "expert";
36511
36544
  }
36512
36545
  async handleMessages(agentContext, messages, tools) {
36513
36546
  const pseudoHtmlDescription = "This is the environmental information after the operation, including the latest browser screenshot and page elements. Please perform the next operation based on the environmental information. Do not output the following elements and index information in your response.\n\nIndex and elements:\n";