Separate Components

[BeckettFrey]

Problem

The DecisionTree.tsx file is not a React component, it's a class-based utility that performs direct DOM manipulation. This violates the separation of concerns components directory should contain only React UI components, not domain logic or imperative DOM code.

Currently, HelpChat.tsx directly instantiates the DecisionTree class and manually manages its lifecycle with useEffect and DOM refs. This approach:

• Mixes framework-agnostic logic with React component code
• Makes the decision tree harder to test and reuse outside React
• Blurs the intended structure of the codebase

Proposed Solution

Move domain logic to lib/decision-tree/

• Extract the DecisionTree class (nodes, state, tree logic) as a framework-agnostic module
• Keep all business logic separate from UI concerns
• Create DOM widget in lib/decision-tree/widget.ts
• Handle all DOM rendering and manipulation
• Provide clean lifecycle methods (init, update, destroy)

Add thin React wrapper in components/DecisionTreeWrapper.tsx

• Use refs and useEffect to manage widget lifecycle
• Accept props for configuration and callbacks
• Serve as the single React integration point

Update HelpChat.tsx

• Use the new DecisionTreeWrapper component instead of direct instantiation
• Remove manual DOM manipulation
• This restores proper separation: domain logic in lib/, React UI in components/