Customizing the Widget

:root {
  /* Colors */
  --opencx-primary-color: #007bff;
  --opencx-secondary-color: #6c757d;
  --opencx-background-color: #ffffff;
  --opencx-text-color: #212529;
  
  /* Typography */
  --opencx-font-family: system-ui, -apple-system, sans-serif;
  --opencx-font-size: 16px;
  
  /* Spacing */
  --opencx-spacing-sm: 0.5rem;
  --opencx-spacing-md: 1rem;
  --opencx-spacing-lg: 1.5rem;
  
  /* Border Radius */
  --opencx-border-radius: 8px;
}

/* Chat container */
.opencx-widget-container {
  /* Your styles */
}

/* Message bubbles */
.opencx-message-bubble {
  /* Your styles */
}

/* User message */
.opencx-user-message {
  /* Your styles */
}

/* Bot message */
.opencx-bot-message {
  /* Your styles */
}

/* Input area */
.opencx-input-container {
  /* Your styles */
}

import { createChat } from '@opencx/widget';

const chat = createChat({
  // ... other options
  messageRenderer: (message) => {
    if (message.type === 'FROM_BOT') {
      return {
        // Custom rendering logic
        element: customRenderFunction(message)
      };
    }
    return defaultRenderer(message);
  }
});

const chat = createChat({
  // ... other options
  inputValidation: (message) => {
    if (message.length < 2) {
      return {
        isValid: false,
        error: 'Message too short'
      };
    }
    return { isValid: true };
  }
});

import { useChat, useConfigData } from '@opencx/widget/react';

function CustomChatInterface() {
  const { messages, sendMessage } = useChat();
  const { config } = useConfigData();
  
  return (
    <div className="custom-chat">
      {messages.map((msg) => (
        <CustomMessageBubble
          key={msg.id}
          message={msg}
        />
      ))}
      <CustomInputArea onSend={sendMessage} />
    </div>
  );
}

const customPlatform = {
  env: {
    platform: 'web',
    // Add custom environment variables
    customFeature: true
  },
  storage: {
    // Custom storage implementation
    getItem: async (key) => {
      // Your custom storage logic
    },
    setItem: async (key, value) => {
      // Your custom storage logic
    }
  },
  logger: {
    // Custom logging implementation
    debug: (msg) => {
      // Your custom logging logic
    },
    error: (msg) => {
      // Your custom error logging
    }
  }
};

const chat = createChat({
  // ... other options
  platform: customPlatform
});

chat.on('message:sent', (message) => {
  // Custom handling of sent messages
});

chat.on('message:received', (message) => {
  // Custom handling of received messages
});

chat.on('error', (error) => {
  // Custom error handling
});