interactive widget

[sydney-runkle]

No description provided.

[github-actions]

Preview ID generated: preview-srinte-1760463295-dee7375

[Copilot]

Pull Request Overview

This PR adds an interactive visualization widget for LangChain middleware hooks that demonstrates how different middleware configurations affect agent execution flow. The widget provides language-specific diagrams that automatically switch between Python (snake_case) and JavaScript (camelCase) naming conventions.

Key Changes:

• Interactive HTML widget with checkboxes to toggle different middleware hooks
• Dynamic diagram generation using Mermaid.js that updates based on selected hook combinations
• Language detection that adapts hook names and diagrams based on the current documentation context

Reviewed Changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/plugins/middleware_visualization/index.html	Main interactive widget with styling, controls, and JavaScript logic
src/plugins/middleware_visualization/generate_middleware_diagrams.py	Python script to generate all possible middleware hook combination diagrams
src/plugins/middleware_visualization/diagrams_python.js	Pre-generated Python diagrams with snake_case naming
src/plugins/middleware_visualization/diagrams_js.js	Pre-generated JavaScript diagrams with camelCase naming
src/plugins/middleware_visualization/README.md	Documentation for the widget usage and regeneration process
src/oss/langchain/middleware.mdx	Enhanced middleware documentation with detailed hook descriptions
src/oss/langchain/agents.mdx	Added visualization section with embedded widget
tests/unit_tests/test_builder.py	Added .html to supported file extensions
pipeline/core/builder.py	Updated build pipeline to handle HTML files and plugin directories
pyproject.toml	Excluded diagram generator from linting and type checking

[Copilot]

Duplicate font-size declaration. The .section-title class already has font-size: 0.875rem on line 71, and this line overrides it with a different value. Consider removing one of these declarations or using a more specific selector if different font sizes are needed.

Suggested change

	font-size: 0.75rem;
	}
	}

[Copilot]

The font-size of 1.25em for inline code seems unusually large and may cause layout issues. Consider using a more standard size like 0.875em or 0.9em for better readability and consistency with typical code formatting.

Suggested change

	font-size: 1.25em;
	font-size: 0.9em;

[Copilot]

These script tags with src attributes don't need id attributes since they're not being referenced by their IDs in the code. The id attributes can be removed for cleaner HTML.

Suggested change

	<script id="diagrams-python" src="./diagrams_python.js"></script>
	<script id="diagrams-js" src="./diagrams_js.js"></script>
	<script src="./diagrams_python.js"></script>
	<script src="./diagrams_js.js"></script>

[Copilot]

The method parameters should have type hints for consistency with modern Python practices. Consider adding type annotations for messages, stop, run_manager, and the return type.

[Copilot]

These regex replacements are removing the hook name portion but keeping the class name, which may not provide the intended cleanup. Consider whether these replacements should completely remove the escaped dot notation or replace it with something more meaningful.

Suggested change

	(r"BeforeAgentMiddleware\\2ebefore_agent", "BeforeAgentMiddleware"),
	(r"BeforeModelMiddleware\\2ebefore_model", "BeforeModelMiddleware"),
	(r"AfterModelMiddleware\\2eafter_model", "AfterModelMiddleware"),
	(r"AfterAgentMiddleware\\2eafter_agent", "AfterAgentMiddleware"),
	(r"BeforeAgentMiddleware\\2ebefore_agent", "beforeAgent"),
	(r"BeforeModelMiddleware\\2ebefore_model", "beforeModel"),
	(r"AfterModelMiddleware\\2eafter_model", "afterModel"),
	(r"AfterAgentMiddleware\\2eafter_agent", "afterAgent"),