Overview

This guide details the architecture for Symphony's component system - the foundation for creating specialized UI components that integrate with Symphony's AI orchestration system.

Package Structure

frontend/
  ├── {component}/
  │   ├── src/
  │   │   ├── components/
  │   │   │   ├── Component.tsx              # Core component
  │   │   │   ├── ComponentBlock.tsx         # Block-compatible wrapper
  │   │   │   └── ComponentToolbar.tsx       # Component controls
  │   │   ├── hooks/
  │   │   │   ├── useComponent.ts            # Component state and methods
  │   │   │   ├── useComponentExtensions.ts  # Extension management
  │   │   │   └── useComponentTheme.ts       # Theme handling
  │   │   ├── context/
  │   │   │   ├── ComponentContext.tsx       # Component configuration context
  │   │   │   └── ComponentLayoutContext.tsx # Layout management context
  │   │   ├── layout/
  │   │   │   ├── BlockAdapter.tsx           # Integration with block system
  │   │   │   └── LayoutManager.tsx          # Position/resize management
  │   │   ├── themes/
  │   │   │   ├── ThemeProvider.tsx          # Theme context provider
  │   │   │   └── defaultThemes.ts           # Built-in themes
  │   │   └── symphony/
  │   │       ├── SymphonyComponent.tsx      # Symphony-specific wrapper
  │   │       ├── AIModelIntegration.ts      # AI model hooks
  │   │       └── ExtensionPoints.ts         # Symphony extension points
  │   └── package.json
  └── core/
      └── src/
          └── blocks/
              └── ComponentBlock.tsx         # Core integration point

Core Component Architecture

The core component uses a foundation library (Monaco, CodeMirror, etc.) as needed:

// Simplified example
export const Component = ({
  initialValue,
  language,
  onChange,
  ...props
}) => {
  const { componentRef, value, setValue } = useComponent(initialValue);
  const { theme } = useComponentTheme();
  const { extensions } = useComponentExtensions(language);

  return (
    <div className="symphony-component">
      {/* Component implementation */}
    </div>
  );
};

Block-Based Integration

Components are designed to work within Symphony's block system:

// ComponentBlock.tsx
export const ComponentBlock = (props) => {
  const { blockProps, componentProps } = useBlockAdapter(props);

  return (
    <div {...blockProps} className="symphony-component-block">
      <Component {...componentProps} />
    </div>
  );
};

The BlockAdapter handles:

• Resizing events
• Drag and drop capabilities
• Block API compatibility
• Position management

Configuration and Settings

React Context provides component configuration:

// ComponentContext.tsx
interface ComponentConfig {
  fontSize: number;
  lineHeight: number;
  // Other component settings
}

const ComponentContext = createContext<{
  config: ComponentConfig;
  updateConfig: (config: Partial<ComponentConfig>) => void;
}>({
  config: defaultConfig,
  updateConfig: () => {},
});

export const ComponentProvider: React.FC = ({ children }) => {
  const [config, setConfig] = useState<ComponentConfig>(defaultConfig);

  const updateConfig = (newConfig: Partial<ComponentConfig>) => {
    setConfig(prev => ({ ...prev, ...newConfig }));
  };

  return (
    <ComponentContext.Provider value={{ config, updateConfig }}>
      {children}
    </ComponentContext.Provider>
  );
};

Layout Management

The layout manager handles block positioning and resizing: