openclaw - 💡(How to fix) Fix Feature request: Add width parameter to [embed] directive [1 participants]

TL;DR

To add support for controlling the iframe width in the [embed] directive, modify the renderPreviewFrame function in ui/src/ui/chat/tool-cards.ts to include a width parameter.

Guidance

• Modify the renderPreviewFrame function to accept a width parameter in the params object.
• Update the style attribute of the iframe to include the width parameter, using the suggested code change: style=${params.height ? \height:${params.height}px; width: ${params.width ?? 100}%` : ""}`.
• Test the updated [embed] directive with the new width parameter to verify that it correctly sets the iframe width.
• Consider adding validation or default values for the width parameter to ensure it is used correctly.

Example

function renderPreviewFrame(params: {
  title: string;
  src?: string;
  height?: number;
  width?: number;
  sandbox?: string;
}) {
  return html\`
    <iframe
      class="chat-tool-card__preview-frame"
      title=${params.title}
      sandbox=${params.sandbox ?? ""}
      src=${params.src ?? nothing}
      style=${params.height ? \`height:${params.height}px; width: ${params.width ?? 100}%\` : ""}
    ></iframe>
  `;
}

Notes

This solution assumes that the width parameter should be a percentage value. If a different unit (e.g. pixels) is desired, the code change will need to be adjusted accordingly.

Recommendation

Apply the suggested workaround by modifying the renderPreviewFrame function to include the width parameter, as this will provide the desired functionality without requiring a full upgrade or patch.