openclaw - 💡(How to fix) Fix [Feature] Add sidebars for read/write file content and exec terminal output in Dashboard Chat [1 participants]

Fix Plan

To address the issue, we will implement the following steps:

• Add a button to read/write tool blocks to open a sidebar with file contents
• Add a button to exec tool blocks to open a sidebar with terminal console output
• Preserve markdown formatting support in the sidebar

Implementation Steps

Read/Write Tool Block

1. Create a new React component for the sidebar: FileSidebar.js
2. Add a button to the read/write tool block:

<button onClick={() => openFileSidebar(filePath)}>Inspect File</button>

1. Implement the openFileSidebar function to render the FileSidebar component

const openFileSidebar = (filePath) => {
  // Render FileSidebar component with file contents
  const fileContents = getFileContents(filePath);
  return <FileSidebar fileContents={fileContents} />;
};

Exec Tool Block

1. Create a new React component for the sidebar: ConsoleOutputSidebar.js
2. Add a button to the exec tool block:

<button onClick={() => openConsoleOutputSidebar(execResult)}>Inspect Output</button>

1. Implement the openConsoleOutputSidebar function to render the ConsoleOutputSidebar component

const openConsoleOutputSidebar = (execResult) => {
  // Render ConsoleOutputSidebar component with console output
  const consoleOutput = getConsoleOutput(execResult);
  return <ConsoleOutputSidebar consoleOutput={consoleOutput} />;
};

Verification

To verify the fix, test the following scenarios:

• Clicking the "Inspect File" button in a read/write tool block opens a sidebar with the file contents
• Clicking the "Inspect Output" button in an exec tool block opens a sidebar with the terminal console output
• Markdown formatting is preserved in the sidebar

Extra Tips

• Ensure that the getFileContents and getConsoleOutput functions are implemented correctly to retrieve the file contents and console output, respectively.
• Use a library like marked to preserve markdown formatting in the sidebar.