Skip to content

Using AI and Other Feature Components#

This document provides an overview of how to use AI features and other components in the Command Center application, including configuration, feature flags, and React integration.

Feature Management#

Feature management in Command Center allows you to enable or disable specific features dynamically. This is useful for testing new functionalities or controlling feature availability in production.

Enabling Features#

To enable a feature, you can use the Debug class available globally as window.cc. Here are some common commands:

// Enable AI Chat feature
window.cc.enableFeature("enableAIChat");
// Enable mock deploy logs
window.cc.enableMockDeployLogs();
// Disable AI Chat feature
window.cc.disableFeature("enableAIChat");
// Disable mock deploy logs
window.cc.disableMockDeployLogs();
// View current feature status
window.cc.showFeatureStatus();

Example Usage#

You can use the feature management system in your React components to conditionally render features based on their availability. Here's an example of how to integrate AI Chat functionality:

import React, { useState } from "react";
import AIChatModalWrapper from "@cc/components/AIChatModal/AIChatModalWrapper";
import { useFeatureFlags } from "@cc/hooks/useFeatureFlags";
import Button from "@cc/components/buttons/Button";

const ExampleFeatureUsage: React.FC = () => {
    const [showAIChat, setShowAIChat] = useState(false);
    const { isFeatureEnabled } = useFeatureFlags();

    return (
        <div style={{ padding: "1rem" }}>
            <h3>Feature Management Example</h3>

            {/* AI Chat Button */}
            <div style={{ marginBottom: "1rem" }}>
                <Button
                    onClick={() => setShowAIChat(true)}
                    disabled={!isFeatureEnabled("enableAIChat")}
                    title={
                        isFeatureEnabled("enableAIChat")
                            ? "Open AI Chat"
                            : "AI Chat is disabled - Enable with cc.enableAIChat()"
                    }
                >
                    {isFeatureEnabled("enableAIChat")
                        ? "🤖 AI Chat"
                        : "🚫 AI Chat (Disabled)"}
                </Button>
            </div>

            {/* Feature Status Display */}
            <div
                style={{
                    background: "var(--secondary)",
                    padding: "1rem",
                    borderRadius: "4px",
                    marginBottom: "1rem",
                }}
            >
                <h4>Current Feature Status:</h4>
                <ul>
                    <li>
                        Mock Deploy Logs:{" "}
                        <span
                            style={{
                                color: isFeatureEnabled("useMockDeployLogs")
                                    ? "green"
                                    : "red",
                            }}
                        >
                            {isFeatureEnabled("useMockDeployLogs")
                                ? "✅ Enabled"
                                : "❌ Disabled"}
                        </span>
                    </li>
                    <li>
                        AI Chat Preview:{" "}
                        <span
                            style={{
                                color: isFeatureEnabled("enableAIChat")
                                    ? "green"
                                    : "red",
                            }}
                        >
                            {isFeatureEnabled("enableAIChat")
                                ? "✅ Enabled"
                                : "❌ Disabled"}
                        </span>
                    </li>
                </ul>
            </div>

            {/* Debug Commands Help */}
            <div
                style={{
                    background: "var(--background)",
                    padding: "1rem",
                    borderRadius: "4px",
                    border: "1px solid var(--border-color)",
                }}
            >
                <h4>Debug Console Commands:</h4>
                <code
                    style={{
                        display: "block",
                        whiteSpace: "pre-line",
                        fontSize: "0.875rem",
                    }}
                >
                    {`// Enable features
cc.enableAIChat()
cc.enableMockDeployLogs()

// Disable features
cc.disableAIChat()
cc.disableMockDeployLogs()

// Configure OpenAI
cc.setAzureOpenAI('endpoint', 'apiKey', 'deployment')
cc.setOpenAI('apiKey', 'gpt-4')

// View status
cc.showFeatureStatus()
cc.help()`}
                </code>
            </div>

            {/* AI Chat Modal */}
            {showAIChat && (
                <AIChatModalWrapper
                    onClose={() => setShowAIChat(false)}
                    onInsertCode={(code) => {
                        console.log("Code to insert:", code);
                        // Handle code insertion logic here
                    }}
                />
            )}
        </div>
    );
};

export default ExampleFeatureUsage;