Kombai

https://docs.kombai.com
Admin
Kombai is an AI agent purpose-built for frontend development, capable of building functional...
Tokens:27,082
Snippets:240
Trust Score:9.2
Update:9 months ago
Show doc for...
Tokens:
Raw
### Fetching llms.txt Data

Source: https://docs.kombai.com/context/search-codebase

This example demonstrates how to fetch the 'llms.txt' file from a specified URL. This file is used to find navigation and other pages within the documentation. Ensure proper error handling for network requests.

```javascript
fetch('https://docs.kombai.com/llms.txt')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.text();
  })
  .then(data => {
    console.log(data);
    // Process the data to find navigation and other pages
  })
  .catch(error => {
    console.error('Error fetching llms.txt:', error);
  });
```

--------------------------------

### Check PowerShell Version

Source: https://docs.kombai.com/troubleshooting/frequently-asked-questions

This command checks the current installed version of PowerShell. Kombai requires PowerShell version 7 or higher for shell integration on Windows. Users with older versions are advised to update.

```powershell
$PSVersionTable.PSVersion
```

--------------------------------

### React Logout Component for Kombai

Source: https://docs.kombai.com/get-started/set-up

A React component that renders an SVG icon for a logout action. It uses inline styles for display and positioning. This component is part of the Kombai project.

```javascript
export const Logout = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{
    display: "inline"
  }} {...props}>
        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
        <polyline points="16 17 21 12 16 7"></polyline>
        <line x1="21" x2="9" y1="12" y2="12"></line>
      </svg>
    </div>;
};
```

--------------------------------

### Get Current PowerShell Execution Policy

Source: https://docs.kombai.com/troubleshooting/frequently-asked-questions

Retrieves the current PowerShell execution policy. Kombai recommends 'RemoteSigned', 'Unrestricted', or 'Bypass' for shell integration. If the policy is 'Restricted' or 'AllSigned', it may need to be changed.

```powershell
Get-ExecutionPolicy
```

--------------------------------

### React Component for QuickSettings Icon

Source: https://docs.kombai.com/context/search-codebase

This React component renders an SVG icon representing quick settings. It's designed to be inline and accepts additional SVG props. This component is a dependency for interacting with Kombai's settings.

```javascript
export const QuickSettings = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="18" height="18" fill="currentColor" stroke="currentColor" strokeWidth="0" style={{
    display: "inline"
  }} {...props}>
        <path d="M6 9.5C6.93191 9.5 7.71496 10.1374 7.93699 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7455 13.8231 11.9496 13.5899 11.9919L13.5 12L7.93673 12.001C7.71435 12.8631 6.93155 13.5 6 13.5C5.06845 13.5 4.28565 12.8631 4.06327 12.001L2.5 12C2.22386 12 2 11.7761 2 11.5C2 11.2545 2.17688 11.0504 2.41012 11.0081L2.5 11H4.06301C4.28504 10.1374 5.06809 9.5 6 9.5ZM6 10.5C5.44772 10.5 5 10.9477 5 11.5C5 12.0523 5.44772 12.5 6 12.5C6.55228 12.5 7 12.0523 7 11.5C7 10.9477 6.55228 10.5 6 10.5ZM10 2.5C10.9319 2.5 11.715 3.13738 11.937 3.99998L13.5 4C13.7761 4 14 4.22386 14 4.5C14 4.74546 13.8231 4.94961 13.5899 4.99194L13.5 5L11.9367 5.00102C11.7144 5.86312 10.9316 6.5 10 6.5C9.06845 6.5 8.28565 5.86312 8.06327 5.00102L2.5 5C2.22386 5 2 4.77614 2 4.5C2 4.25454 2.17688 4.05039 2.41012 4.00806L2.5 4L8.06301 3.99998C8.28504 3.13738 9.06809 2.5 10 2.5ZM10 3.5C9.44772 3.5 9 3.94772 9 4.5C9 5.05228 9.44772 5.5 10 5.5C10.5523 5.5 11 5.05228 11 4.5C11 3.94772 10.5523 3.5 10 3.5Z" />
      </svg>
    </div>;
};
```

--------------------------------

### Auto-run Terminal Commands Configuration

Source: https://docs.kombai.com/features/generate-code

This section explains how to enable automatic execution of terminal commands in Kombai. Users can configure this through quick settings or directly within the terminal command box.

```javascript
import { QuickSettings } from './KombaiUI'; // Assuming QuickSettings is a component

function AutoRunTerminalCommands() {
  // Example of using QuickSettings component
  return (
    <div>
      <p>1. Click the <QuickSettings /> icon in Kombai's input box.</p>
      <p>2. Turn on the <strong>Auto run all commands</strong> toggle.</p>
    </div>
  );
}

function AutoRunTerminalCommandsFromBox() {
  // Example of interaction with terminal command box
  return (
    <div>
      <p>1. When a terminal command is run, click <strong>Ask Every Time</strong> on the bottom left of the terminal command box.</p>
      <p>2. Select <strong>Auto run all commands</strong> from the dropdown.</p>
    </div>
  );
}
```

--------------------------------

### React Rocket Icon Component

Source: https://docs.kombai.com/troubleshooting/frequently-asked-questions

A React component for rendering a rocket icon. It accepts arbitrary props and renders an SVG element for the icon. The component is styled for inline display with centered content.

```javascript
export const RocketIcon = props => {
  return <div style={{display: "inline", justifyContent: "center", alignItems: "center"}}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="18" height="18" fill="currentColor" stroke="currentColor" strokeWidth="0" style={{display: "inline"}} {...props}>
        <path fillRule="evenodd" clipRule="evenodd" d="M14.491 1c-3.598.004-6.654 1.983-8.835 4H1.5l-.5.5v3l.147.354.991.991.001.009 4 4 .009.001.999.999L7.5 15h3l.5-.5v-4.154c2.019-2.178 3.996-5.233 3.992-8.846l-.501-.5zM2 6h2.643a23.828 23.828 0 0 0-2.225 2.71L2 8.294V6zm5.7 8l-.42-.423a23.59 23.59 0 0 0 2.715-2.216V14H7.7zm-1.143-1.144L3.136 9.437C4.128 8 8.379 2.355 13.978 2.016c-.326 5.612-5.987 9.853-7.421 10.84zM4 15v-1H2v-2H1v3h3zm6.748-7.667a1.5 1.5 0 1 0-2.496-1.666 1.5 1.5 0 0 0 2.495 1.666z" />
      </svg>
    </div>;
};

```

--------------------------------

### React Figma Icon Component

Source: https://docs.kombai.com/troubleshooting/frequently-asked-questions

A React component for rendering a Figma icon. It accepts width and height props for customization and uses an SVG element to display the icon. The component is designed for inline display with centered content.

```javascript
export const FigmaMakeCopyDesign = ({width = 24, height = 24, ...props}) => {
  return <div style={{display: "inline", justifyContent: "center", alignItems: "center"}}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={width} height={height} fill="currentColor" stroke="currentColor" strokeWidth="0" style={{display: "inline"}} {...props}>
        <path d="M4.5 16a.5.5 0 0 1 .5.5V18a1 1 0 0 0 1 1h1.5a.5.5 0 0 1 0 1H6a2 2 0 0 1-2-2v-1.5a.5.5 0 0 1 .5-.5m8.593-1.184c-.425-1.081.643-2.147 1.723-1.723l4.342 1.705h.001c1.17.46 1.105 2.137-.095 2.508l-1.343.414-.413 1.343h-.001c-.36 1.165-1.944 1.26-2.461.202l-.047-.107-1.706-4.34zm1.358-.793a.33.33 0 0 0-.428.428l1.707 4.341a.33.33 0 0 0 .622-.023l.569-1.85 1.849-.568a.33.33 0 0 0 .023-.622zm1.651-7.018A1 1 0 0 1 17 8v2l-.005.102a1 1 0 0 1-.893.893L16 11h-5v5l-.005.102A1 1 0 0 1 10 17H8a1 1 0 0 1-.995-.898L7 16V8a1 1 0 0 1 1-1h8zM8 16h2v-1h-.5a.5.5 0 0 1 0-1h.5v-1h-.5a.5.5 0 0 1 0-1h.5v-1H8zm0-6h2V8H8zm3 0h1v-.5a.5.5 0 0 1 1 0v.5h1v-.5a.5.5 0 0 1 1 0v.5h1V8h-5zM7.5 4a.5.5 0 0 1 0 1H6a1 1 0 0 0-1 1v1.5a.5.5 0 0 1-1 0V6a2 2 0 0 1 2-2zM18 4a2 2 0 0 1 2 2v1.5a.5.5 0 0 1-1 0V6a1 1 0 0 0-1-1h-1.5a.5.5 0 0 1 0-1z"></path>
      </svg>
    </div>;
};
```

--------------------------------

### Resend Input to Kombai

Source: https://docs.kombai.com/features/generate-code

This snippet demonstrates how to resend an existing input to Kombai to generate a new response. It involves clicking on a previous input, optionally editing it, and then confirming the resend action.

```javascript
import React from 'react';

function ResendInputExample() {
  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        paddingTop: "62.5%",
        borderRadius: "6px",
        overflow: "hidden",
      }}>
      <iframe
        src="https://player.vimeo.com/video/1109024920?background=1&badge=0&autopause=0&player_id=0&app_id=58479&dnt=1"
        title="Resend input to Kombai"
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          border: 0,
        }}
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
      />
    </div>
  );
}
```

--------------------------------

### Set PowerShell Execution Policy to RemoteSigned

Source: https://docs.kombai.com/troubleshooting/frequently-asked-questions

Sets the PowerShell execution policy to 'RemoteSigned' for the current user. This is a recommended setting to allow shell integration while maintaining a level of security. The change requires confirmation.

```powershell
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
```

--------------------------------

### HTML Vimeo Player Embed

Source: https://docs.kombai.com/features/agent-controlled-browser

An HTML snippet to embed a Vimeo video player, likely used for demonstration purposes within the agent-controlled browser documentation. It uses an iframe to load the video and specifies various attributes for playback control and fullscreen capabilities.

```html
<div
  style={{
  position: "relative",
  width: "100%",
  padding: "31%",
  overflow: "hidden",
}}
>
  <iframe
    src="https://player.vimeo.com/video/1136800408?badge=0&autopause=0&player_id=0&app_id=58479&dnt=1"
    title="Agent-controlled Browser"
    style={{
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    border: 0,
  }}
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  />
</div>
```

--------------------------------

### Expand in Editor Icon Component (React)

Source: https://docs.kombai.com/account/app-menu

The ExpandInEditor component renders an SVG icon representing expanded view or fullscreen, used to enlarge Kombai within the editor. It is styled for inline display and accepts SVG props.

```javascript
export const ExpandInEditor = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="18" height="18" fill="currentColor" stroke="currentColor" strokeWidth="0" style={{
    display: "inline"
  }} {...props}>
        <path d="M15 6.5l-.47-.5H7V1.47L6.53 1H1.47L1 1.47v8.06l.47.47H4v4.53l.47.47h10.06l.47-.47V6.5zM2 9V3h4v6H2zm12 5H5v-4h1.53L7 9.53V8.013h7V14z"></path>
      </svg>
    </div>;
};
```

--------------------------------

### React Account Icon Component

Source: https://docs.kombai.com/account/pricing

A React component that renders an SVG icon for an account. It uses inline styles for basic layout and accepts SVG properties via props. This component is likely used for visual representation within the Kombai application.

```jsx
export const AccountIcon = props => {
  return <div style={{ display: "inline", justifyContent: "center", alignItems: "center" }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="18" height="18" fill="currentColor" stroke="currentColor" strokeWidth="0" style={{ display: "inline" }} {...props}>
        <path d="M16 7.992C16 3.58 12.416 0 8 0S0 3.58 0 7.992c0 2.43 1.104 4.62 2.832 6.09.016.016.032.016.032.032.144.112.288.224.448.336.08.048.144.111.224.175A7.98 7.98 0 0 0 8.016 16a7.98 7.98 0 0 0 4.48-1.375c.08-.048.144-.111.224-.16.144-.111.304-.223.448-.335.016-.016.032-.016.032-.032 1.696-1.487 2.8-3.676 2.8-6.106zm-8 7.001c-1.504 0-2.88-.48-4.016-1.279.016-.128.048-.255.08-.383a4.17 4.17 0 0 1 .416-.991c.176-.304.384-.576.64-.816.24-.24.528-.463.816-.639.304-.176.624-.304.976-.4A4.15 4.15 0 0 1 8 10.342a4.185 4.185 0 0 1 2.928 1.166c.368.368.656.8.864 1.295.112.288.192.592.24.911A7.03 7.03 0 0 1 8 14.993zm-2.448-7.4a2.49 2.49 0 0 1-.208-1.024c0-.351.064-.703.208-1.023.144-.32.336-.607.576-.847.24-.24.528-.431.848-.575.32-.144.672-.208 1.024-.208.368 0 .704.064 1.024.208.32.144.608.336.848.575.24.24.432.528.576.847.144.32.208.672.208 1.023 0 .368-.064.704-.208 1.023a2.84 2.84 0 0 1-.576.848 2.84 2.84 0 0 1-.848.575 2.715 2.715 0 0 1-2.064 0 2.84 2.84 0 0 1-.848-.575 2.526 2.526 0 0 1-.56-.848zm7.424 5.306c0-.032-.016-.048-.016-.08a5.22 5.22 0 0 0-.688-1.406 4.883 4.883 0 0 0-1.088-1.135 5.207 5.207 0 0 0-1.04-.608 2.82 2.82 0 0 0 .464-.383 4.2 4.2 0 0 0 .624-.784 3.624 3.624 0 0 0 .528-1.934 3.71 3.71 0 0 0-.288-1.47 3.799 3.799 0 0 0-.816-1.199 3.845 3.845 0 0 0-1.2-.8 3.72 3.72 0 0 0-1.472-.287 3.72 3.72 0 0 0-1.472.288 3.631 3.631 0 0 0-1.2.815 3.84 3.84 0 0 0-.8 1.199 3.71 3.71 0 0 0-.288 1.47c0 .352.048.688.144 1.007.096.336.224.64.4.927.16.288.384.544.624.784.144.144.304.271.48.383a5.12 5.12 0 0 0-1.04.624c-.416.32-.784.703-1.088 1.119a4.999 4.999 0 0 0-.688 1.406c-.016.032-.016.064-.016.08C1.776 11.636.992 9.91.992 7.992.992 4.14 4.144.991 8 .991s7.008 3.149 7.008 7.001a6.96 6.96 0 0 1-2.032 4.907z" />
      </svg>
    </div>;
};
```

--------------------------------

### React Account Icon Component

Source: https://docs.kombai.com/account/subscription

A React functional component that renders an SVG icon representing an account. It accepts props and styles the SVG for inline display. No external dependencies are required beyond React.

```jsx
export const AccountIcon = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="18" height="18" fill="currentColor" stroke="currentColor" strokeWidth="0" style={{
    display: "inline"
  }} {...props}>
        <path d="M16 7.992C16 3.58 12.416 0 8 0S0 3.58 0 7.992c0 2.43 1.104 4.62 2.832 6.09.016.016.032.016.032.032.144.112.288.224.448.336.08.048.144.111.224.175A7.98 7.98 0 0 0 8.016 16a7.98 7.98 0 0 0 4.48-1.375c.08-.048.144-.111.224-.16.144-.111.304-.223.448-.335.016-.016.032-.016.032-.032 1.696-1.487 2.8-3.676 2.8-6.106zm-8 7.001c-1.504 0-2.88-.48-4.016-1.279.016-.128.048-.255.08-.383a4.17 4.17 0 0 1 .416-.991c.176-.304.384-.576.64-.816.24-.24.528-.463.816-.639.304-.176.624-.304.976-.4A4.15 4.15 0 0 1 8 10.342a4.185 4.185 0 0 1 2.928 1.166c.368.368.656.8.864 1.295.112.288.192.592.24.911A7.03 7.03 0 0 1 8 14.993zm-2.448-7.4a2.49 2.49 0 0 1-.208-1.024c0-.351.064-.703.208-1.023.144-.32.336-.607.576-.847.24-.24.528-.431.848-.575.32-.144.672-.208 1.024-.208.368 0 .704.064 1.024.208.32.144.608.336.848.575.24.24.432.528.576.847.144.32.208.672.208 1.023 0 .368-.064.704-.208 1.023a2.84 2.84 0 0 1-.576.848 2.84 2.84 0 0 1-.848.575 2.715 2.715 0 0 1-2.064 0 2.84 2.84 0 0 1-.848-.575 2.526 2.526 0 0 1-.56-.848zm7.424 5.306c0-.032-.016-.048-.016-.08a5.22 5.22 0 0 0-.688-1.406 4.883 4.883 0 0 0-1.088-1.135 5.207 5.207 0 0 0-1.04-.608 2.82 2.82 0 0 0 .464-.383 4.2 4.2 0 0 0 .624-.784 3.624 3.624 0 0 0 .528-1.934 3.71 3.71 0 0 0-.288-1.47 3.799 3.799 0 0 0-.816-1.199 3.845 3.845 0 0 0-1.2-.8 3.72 3.72 0 0 0-1.472-.287 3.72 3.72 0 0 0-1.472.288 3.631 3.631 0 0 0-1.2.815 3.84 3.84 0 0 0-.8 1.199 3.71 3.71 0 0 0-.288 1.47c0 .352.048.688.144 1.007.096.336.224.64.4.927.16.288.384.544.624.784.144.144.304.271.48.383a5.12 5.12 0 0 0-1.04.624c-.416.32-.784.703-1.088 1.119a4.999 4.999 0 0 0-.688 1.406c-.016.032-.016.064-.016.08C1.776 11.636.992 9.91.992 7.992.992 4.14 4.144.991 8 .991s7.008 3.149 7.008 7.001a6.96 6.96 0 0 1-2.032 4.907z" />
      </svg>
    </div>;
};

```

--------------------------------

### React SVG Icon Component: NewChat

Source: https://docs.kombai.com/features/slash-commands

A React component for displaying an SVG 'New Chat' icon. It's suitable for use in React projects and accepts standard SVG properties.

```jsx
export const NewChat = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="18" height="18" fill="currentColor" stroke="currentColor" strokeWidth="0" style={{
    display: "inline"
  }} {...props}>
        <path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"></path>
      </svg>
    </div>;
};

```

--------------------------------

### React SVG Icon Component: Rules

Source: https://docs.kombai.com/features/slash-commands

A React component rendering an SVG 'Rules' icon. Designed for React applications, it accepts standard SVG attributes.

```jsx
export const Rules = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{
    display: "inline"
  }} {...props}>
        <path d="M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13"></path>
        <path d="m8 6 2-2"></path>
        <path d="m18 16 2-2"></path>
        <path d="m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17"></path>
        <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path>
        <path d="m15 5 4 4"></path>
      </svg>
    </div>;
};

```

--------------------------------

### New Chat Icon Component (React)

Source: https://docs.kombai.com/account/app-menu

The NewChat component renders an SVG icon representing a plus sign, used to initiate a new chat session. It is styled for inline display and accepts SVG props.

```javascript
export const NewChat = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="18" height="18" fill="currentColor" stroke="currentColor" strokeWidth="0" style={{
    display: "inline"
  }} {...props}>
        <path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"></path>
      </svg>
    </div>;
};
```

--------------------------------

### React SVG Icon Components

Source: https://docs.kombai.com/features/rules

These are React functional components that render SVG icons. They accept props to customize their appearance and behavior, and are designed to be inline elements.

```javascript
export const DeleteIcon = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor" stroke="currentColor" strokeWidth="0" style={{
    cursor: "pointer",
    display: "inline"
  }} {...props}>
        <g transform="scale(1.5)">
          <path fillRule="evenodd" clipRule="evenodd" d="M10 3h3v1h-1v9l-1 1H4l-1-1V4H2V3h3V2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v1zM9 2H6v1h3V2zM4 13h7V4H4v9zm2-8H5v7h1V5zm1 0h1v7H7V5zm2 0h1v7H9V5z" />
        </g>
      </svg>
    </div>;
};

export const EditIcon = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-pen" style={{
    cursor: "pointer",
    display: "inline"
  }} {...props}>
        <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path>
      </svg>
    </div>;
};

export const NewChat = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="18" height="18" fill="currentColor" stroke="currentColor" strokeWidth="0" style={{
    display: "inline"
  }} {...props}>
        <path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"></path>
      </svg>
    </div>;
};

export const Rules = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{
    display: "inline"
  }} {...props}>
        <path d="M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13"></path>
        <path d="m8 6 2-2"></path>
        <path d="m18 16 2-2"></path>
        <path d="m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17"></path>
        <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path>
        <path d="m15 5 4 4"></path>
      </svg>
    </div>;
};

```

--------------------------------

### React SVG Icon Component: Send

Source: https://docs.kombai.com/features/slash-commands

A React component that renders an SVG icon representing 'Send'. This component is designed to be used within a React application and accepts standard SVG props.

```jsx
export const Send = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="18" height="18" fill="currentColor" stroke="currentColor" strokeWidth="0" style={{
    display: "inline"
  }} {...props}>
        <path d="M1 1.91L1.78 1.5L15 7.44899V8.3999L1.78 14.33L1 13.91L2.58311 8L1 1.91ZM3.6118 8.5L2.33037 13.1295L13.5 7.8999L2.33037 2.83859L3.6118 7.43874L9 7.5V8.5H3.6118Z"></path>
      </svg>
    </div>;
};

```
Tokens:
Raw