### Common Development Commands for element-ui-x

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/develop.md

Essential npm commands for building the component library, starting the example project, and previewing documentation locally.

```bash
npm run build:lib
```

```bash
npm run dev:examples
```

```bash
npm run dev:docs
```

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

### Verify Element-UI-X Installation with a Typewriter Component Example

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/installation.md

Provides a complete Vue Single File Component (SFC) example to verify the successful installation and usage of Element-UI-X. It showcases the `el-x-typewriter` component with basic content, controls for starting/resetting the typing effect, and associated styling.

```vue
<template>
  <div>
    <el-x-typewriter
      :content="basicContent"
      :typing="true"
      ref="basicDemo"
    />

    <div class="demo-controls">
      <el-button-group>
        <el-button
          size="small"
          type="primary"
          @click="startBasic"
        >
          Preview
        </el-button>
        <el-button
          size="small"
          @click="resetBasic"
        >
          Reset
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        basicContent:
          'This is a basic typing effect demonstration, showcasing the basic functionality of the Typewriter component.',
      };
    },
    methods: {
      startBasic() {
        this.$refs.basicDemo.restart();
      },
      resetBasic() {
        this.$refs.basicDemo.restart();
      },
    },
  };
</script>

<style>
  .demo-controls {
    margin-top: 15px;
  }
</style>
```

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

### element-ui-x Development and Build Commands

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/guide/develop.md

Common npm scripts for building the component library, starting the example project, and running the documentation server locally. Ensure the component library is built before previewing.

```bash
npm run build:lib
```

```bash
npm run dev:examples
```

```bash
npm run dev:docs
```

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

### Vue.js component example using ElXTypewriter

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/guide/installation.md

This comprehensive Vue.js component example demonstrates the usage of the `el-x-typewriter` component from Element-UI-X. It includes the template structure, component data, methods for controlling the typewriter effect, and basic styling.

```html
<template>
  <div>
    <el-x-typewriter
      :content="basicContent"
      :typing="true"
      ref="basicDemo"
    />

    <div class="demo-controls">
      <el-button-group>
        <el-button
          size="small"
          type="primary"
          @click="startBasic"
        >
          预览
        </el-button>
        <el-button
          size="small"
          @click="resetBasic"
        >
          重置
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>
```

```javascript
<script>
  export default {
    data() {
      return {
        basicContent: '这是一个基础打字效果演示，展示Typewriter组件的基本功能。',
      };
    },
    methods: {
      startBasic() {
        this.$refs.basicDemo.restart();
      },
      resetBasic() {
        this.$refs.basicDemo.restart();
      },
    },
  };
</script>
```

```css
<style>
  .demo-controls {
    margin-top: 15px;
  }
</style>
```

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

### Install Element-UI and Element-UI-X using npm

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/installation.md

Installs the core Element UI library and the Element-UI-X extension using the npm package manager. Element UI is a prerequisite for Element-UI-X and should be installed first.

```bash
# Install Element UI
npm install element-ui

# Install Element-UI-X
npm install vue-element-ui-x
```

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

### Build and Run Examples with Local Package

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/guide/develop.md

Commands to first build the local component library and then run the example project, allowing for testing changes made to the local package.

```bash
# 先本地构建
npm run build:lib

# 示例项目执行
npm run dev:examples
```

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

### Build and Run Example Project for Local Debugging

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/develop.md

Commands to build the component library locally and then run the example project, which is essential for testing local changes and debugging.

```bash
npm run build:lib
```

```bash
npm run dev:examples
```

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

### Install Element-UI and Element-UI-X using yarn

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/installation.md

Installs the core Element UI library and the Element-UI-X extension using the yarn package manager. Element UI is a prerequisite for Element-UI-X and should be installed first.

```bash
# Install Element UI
yarn add element-ui

# Install Element-UI-X
yarn add vue-element-ui-x
```

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

### Vue.js Component Example with ElXTypewriter and Controls

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/README.md

This comprehensive example showcases a Vue.js component integrating the `el-x-typewriter` component from Element-UI-X. It includes the HTML template for rendering, JavaScript logic for controlling the typewriter effect (start/reset), and basic CSS for styling the controls, demonstrating a complete usage scenario.

```html
<template>
  <div>
    <el-x-typewriter
      :content="basicContent"
      :typing="true"
      ref="basicDemo"
    />

    <div class="demo-controls">
      <el-button-group>
        <el-button
          size="small"
          type="primary"
          @click="startBasic"
        >
          Preview
        </el-button>
        <el-button
          size="small"
          @click="resetBasic"
        >
          Reset
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>
```

```javascript
<script>
  export default {
    data() {
      return {
        basicContent:
          'This is a basic typing effect demonstration, showcasing the basic functionality of the Typewriter component.',
      };
    },
    methods: {
      startBasic() {
        this.$refs.basicDemo.restart();
      },
      resetBasic() {
        this.$refs.basicDemo.restart();
      },
    },
  };
</script>
```

```css
<style>
  .demo-controls {
    margin-top: 15px;
  }
</style>
```

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

### Install babel-plugin-component for On-demand Imports

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/installation.md

Installs the `babel-plugin-component` development dependency, which is required to enable automatic on-demand component importing for Element UI and Element-UI-X, optimizing bundle size.

```bash
npm install babel-plugin-component -D
```

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

### Install Project Dependencies with npm

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/guide/develop.md

Guide to install all necessary project dependencies using npm. It is recommended to use npm for dependency management.

```bash
# 推荐使用 NPM 管理依赖
npm install:all
```

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

### Understand element-ui-x Project Directory Structure

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/guide/develop.md

Overview of the main project directories and their contents, including CI/CD configurations, documentation, examples, and the core component library source code.

```plaintext
├── .github                     # CI/CD 配置
├── docs                        # 文档源码（基于 VuePress 1.x，真的不要用这个）
├── examples                    # 演示源码
├── packages
│   └── element-ui-x            # 组件源码
|       ├──build                # 打包配置
|       └──src
|          ├──— components      # 组件核心源码
|          |    ├── Bubble      # 气泡组件
|          |    ├── BubbleList  # 气泡列表
|          |    ├── Sender      # 输入框
|          |    ├── Typewriter  # 打字器组件
|          |    └── ...         # 更多组件
|          └── styles           # 组件样式
|          └── utils            # 工具函数
|          └── mixins           # 混入
|
|
└── package.json                # 项目配置
```

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

### Install Element UI and Element-UI-X via npm

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/README.md

This snippet provides the `npm install` commands necessary to add Element UI and its extension, Element-UI-X, to your project. These commands are executed in the terminal and fetch the packages from the npm registry, making them available for use in your Vue.js application.

```bash
npm install element-ui
npm install vue-element-ui-x
```

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

### Install babel-plugin-component for on-demand import

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/guide/installation.md

This bash command installs `babel-plugin-component` as a development dependency. This plugin is used to enable automatic tree-shaking and on-demand loading for Element UI and Element-UI-X components.

```bash
npm install babel-plugin-component -D
```

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

### Import and register components with babel-plugin-component

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/guide/installation.md

This JavaScript snippet demonstrates how to import and register specific components from Element UI and Element-UI-X in `main.js` when `babel-plugin-component` is configured. The plugin handles the actual on-demand loading.

```javascript
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import { ElXTypewriter } from 'vue-element-ui-x';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
Vue.component(ElXTypewriter.name, ElXTypewriter);
```

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

### Install Element UI and Element-UI-X using npm

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/guide/installation.md

This snippet shows how to install Element UI and vue-element-ui-x packages using the npm package manager. Element UI is a prerequisite for Element-UI-X.

```bash
npm install element-ui
npm install vue-element-ui-x
```

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

### Configure babel-plugin-component for Element UI and Element-UI-X

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/installation.md

Configures `babel-plugin-component` in `.babelrc` or `babel.config.js` to enable automatic tree-shaking for Element UI and Element-UI-X components. This setup ensures that only used components are bundled, reducing the final application size.

```json
{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    [
      "component",
      {
        "libraryName": "vue-element-ui-x",
        "style": false
      },
      "element-ui-x"
    ]
  ]
}
```

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

### Install Element UI and Element-UI-X using yarn

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/guide/installation.md

This snippet demonstrates how to install Element UI and vue-element-ui-x packages using the yarn package manager. Element UI is a prerequisite for Element-UI-X.

```bash
yarn add element-ui
yarn add vue-element-ui-x
```

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

### element-ui-x Project Directory Structure

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/develop.md

Overview of the main project directory structure, highlighting key folders like 'docs', 'examples', and 'packages/element-ui-x' with its internal component organization.

```plaintext
├── .github                     # CI/CD configuration
├── docs                        # Documentation source code (based on VuePress 1.x, really don't use this)
├── examples                    # Demo source code
├── packages
│   └── element-ui-x            # Component source code
|       ├──build                # Build configuration
|       └──src
|          ├──— components      # Component core source code
|          |    ├── Bubble      # Bubble component
|          |    ├── BubbleList  # Bubble list
|          |    ├── Sender      # Input box
|          |    ├── Typewriter  # Typewriter component
|          |    └── ...         # More components
|          └── styles           # Component styles
|          └── utils            # Utility functions
|          └── mixins           # Mixins
|
|
└── package.json                # Project configuration
```

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

### Install Project Dependencies with NPM

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/develop.md

Command to install all necessary project dependencies using npm, which is the recommended package manager for this project.

```bash
npm install:all
```

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

### Configure Local Package Dependency for Debugging

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/guide/develop.md

Instructions to modify `package.json` files in `docs` and `examples` to link to the local `element-ui-x` package using a `file:` protocol, enabling local debugging.

```json
"dependencies": {
    "vue-element-ui-x": "file:../packages/element-ui-x",
  }
```

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

### On-demand Component Import using babel-plugin-component

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/installation.md

Demonstrates how to import specific components from Element UI and Element-UI-X when `babel-plugin-component` is configured. This approach automatically handles component and style imports, simplifying the process for selective component usage.

```javascript
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import { ElXTypewriter } from 'vue-element-ui-x';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
Vue.component(ElXTypewriter.name, ElXTypewriter);
```

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

### Configure Local Package Linking in package.json

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/develop.md

JSON snippet demonstrating how to modify 'package.json' dependencies to link a local build of 'element-ui-x', enabling debugging within the example project.

```json
"dependencies": {
    "vue-element-ui-x": "file:../packages/element-ui-x",
  }
```

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

### On-demand Import and Registration of Multiple Vue.js Components

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/README.md

This JavaScript example demonstrates how to selectively import and register multiple components from both Element UI (`Button`, `Select`) and Element-UI-X (`ElXTypewriter`) in a Vue.js application. This 'on-demand' strategy helps optimize performance by only loading the components that are explicitly used, rather than the entire library.

```javascript
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import { ElXTypewriter } from 'vue-element-ui-x';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
Vue.component(ElXTypewriter.name, ElXTypewriter);
```

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

### Clone the element-ui-x Repository

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/guide/develop.md

Instructions to clone the element-ui-x project repository from GitHub and navigate into its directory.

```bash
git clone https://github.com/worryzyy/element-ui-x.git
cd element-ui-x
```

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

### Configure babel-plugin-component for Element UI and Element-UI-X

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/guide/installation.md

This JSON configuration snippet for `.babelrc` or `babel.config.js` sets up `babel-plugin-component` to enable on-demand import for both `element-ui` and `vue-element-ui-x`. It specifies the library names and style paths.

```json
{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    [
      "component",
      {
        "libraryName": "vue-element-ui-x",
        "style": false
      },
      "element-ui-x"
    ]
  ]
}
```

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

### Clone element-ui-x Repository

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/develop.md

Instructions to clone the 'element-ui-x' project repository from GitHub and navigate into its directory for local development.

```bash
git clone https://github.com/worryzyy/element-ui-x.git
cd element-ui-x
```

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

### Create a New Feature Branch for Contribution

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/guide/develop.md

Instructions for creating a new feature branch following the project's branching strategy (master ← dev ← feature) before starting development on new components or features.

```bash
git checkout -b feature/new-component (new-component 就是你的分支名)
```

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

### Manual On-demand Component Import in Vue.js

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/installation.md

Illustrates how to manually import and register a specific component, `ElXTypewriter`, from Element-UI-X. This method is suitable for projects that only need a few components, avoiding the overhead of a full import.

```javascript
import Vue from 'vue';
import { ElXTypewriter } from 'vue-element-ui-x';

// Register component
Vue.component(ElXTypewriter.name, ElXTypewriter);
```

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

### Full import of Element UI and Element-UI-X in Vue.js

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/guide/installation.md

This JavaScript snippet demonstrates how to fully import and register Element UI and Element-UI-X into a Vue.js application's main.js file. It includes importing CSS and using Vue.use() for both libraries.

```javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import ElementUIX from 'vue-element-ui-x';

Vue.use(ElementUI);

Vue.use(ElementUIX);

new Vue({
  el: '#app',
  render: h => h(App),
});
```

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

### Nested Prompts Component Usage Example

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/components/prompts.md

Demonstrates how to use the el-x-prompts component to create nested prompt structures, including template setup, data binding for items and styles, and event handling for item clicks.

```HTML
<template>
  <div>
    <el-x-prompts
      :items="antdItems"
      :title="'What do you need?'"
      :wrap="true"
      :styles="antdStyles"
      @on-item-click="handleAntdItemClick"
    >
      <template v-slot:icon="{ item }">
        <i
          :class="item.icon"
          :style="item.iconStyle"
        ></i>
      </template>
    </el-x-prompts>
  </div>
</template>
```

```JavaScript
<script>
  export default {
    data() {
      return {
        antdItems: [
          {
            key: '1',
            label: 'Hot Topics',
            icon: 'el-icon-star-off',
            iconStyle: { color: '#FF4D4F' },
            description: 'What are you interested in?',
            children: [
              {
                key: '1-1',
                description: 'What is the latest news about X?',
              },
              {
                key: '1-2',
                description: 'What is AGI?',
              },
              {
                key: '1-3',
                description: 'Where is the documentation?',
              },
            ],
          },
          {
            key: '2',
            label: 'Design Guidelines',
            icon: 'el-icon-reading',
            iconStyle: { color: '#1890FF' },
            description: 'How to design a good product?',
            children: [
              {
                key: '2-1',
                icon: 'el-icon-star-on',
                description: 'Understand user needs',
              },
              {
                key: '2-2',
                icon: 'el-icon-ice-cream-round',
                description: 'Set AI roles',
              },
              {
                key: '2-3',
                icon: 'el-icon-chat-dot-round',
                description: 'Express emotions',
              },
            ],
          },
        ],
        antdStyles: {
          item: {
            flex: 'none',
            width: 'calc(50% - 6px)',
            backgroundImage: 'linear-gradient(137deg, #e5f4ff 0%, #efe7ff 100%)',
            border: '0',
          },
          subItem: {
            background: 'rgba(255,255,255,0.45)',
            border: '1px solid #FFF',
          },
        },
      };
    },
    methods: {
      handleAntdItemClick(info) {
        this.$message({
          message: `Clicked: ${info.data.key}`,
          type: 'success',
        });
      },
    },
  };
</script>
```

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

### Install Element-UI-X via npm

Source: https://github.com/worryzyy/element-ui-x/blob/master/README.md

This snippet provides the recommended command to install the Element-UI-X component library using npm, making it available for use in your project.

```bash
npm install vue-element-ui-x
```

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

### Full Import of Element-UI and Element-UI-X in Vue.js

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/installation.md

Demonstrates how to perform a full, global import of Element UI and Element-UI-X into a Vue.js application's main entry file. It registers both libraries for use throughout the application, emphasizing that Element UI must be imported before Element-UI-X due to dependency.

```javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import ElementUIX from 'vue-element-ui-x';

// Import Element UI
Vue.use(ElementUI);

// Import Element-UI-X
Vue.use(ElementUIX);

new Vue({
  el: '#app',
  render: h => h(App),
});
```

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

### Build AI Chat Interface with Element-UI-X Components

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/quickstart.md

This example demonstrates how to integrate multiple Element-UI-X components (`el-x-thinking`, `el-x-typewriter`, `el-x-sender`) to construct a basic AI chat interface. It covers conditional rendering, data binding, event handling for user input submission, and simulating an asynchronous AI response with loading states and component method calls.

```HTML
<template>
  <div class="ai-chat">
    <!-- Thinking animation component -->
    <el-x-thinking
      v-if="isThinking"
      status="thinking"
      content="AI is thinking..."
    />

    <!-- Typewriter component -->
    <el-x-typewriter
      v-else-if="aiResponse"
      :content="aiResponse"
      :typing="{ interval: 40, step: 1 }"
      ref="typewriter"
    />
    <br />
    <!-- Sender component -->
    <el-x-sender
      v-model="userInput"
      @submit="sendMessage"
      :disabled="isThinking"
      :loading="senderLoading"
      ref="sender"
      clearable
      @cancel="handleCancel"
    />
  </div>
</template>
```

```JavaScript
<script>
  export default {
    data() {
      return {
        userInput: '',
        aiResponse: '',
        isThinking: false,
        senderLoading: false,
        timeoutId: null,
      };
    },
    methods: {
      sendMessage(message) {
        if (!message.trim()) return;

        const userMessage = message;
        this.senderLoading = true;

        // Simulate AI response
        this.timeoutId = setTimeout(() => {
          this.isThinking = true;
          this.senderLoading = false;

          setTimeout(() => {
            this.isThinking = false;
            this.aiResponse = `Your message was: "${userMessage}". This is an AI response example.`;

            this.$nextTick(() => {
              this.$refs.typewriter.restart();
            });
          }, 1500);
        }, 500);
      },
      handleCancel() {
        this.senderLoading = false;
        if (this.timeoutId) {
          clearTimeout(this.timeoutId);
          this.timeoutId = null;
        }
        this.$message.info('Send cancelled');
      },
    },
  };
</script>
```

```CSS
<style>
  .ai-chat {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
  }
</style>
```

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

### Install Element-UI-X via package managers

Source: https://github.com/worryzyy/element-ui-x/blob/master/examples/README.md

Instructions for installing the Element-UI-X library using common Node.js package managers: npm, pnpm, or yarn.

```bash
# NPM
npm install vue-element-ui-x

# PNPM（推荐）
pnpm install vue-element-ui-x

# Yarn
yarn install vue-element-ui-x
```

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

### Full Global Import of Element UI and Element-UI-X in Vue.js

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/README.md

This JavaScript code demonstrates how to perform a full, global import of both Element UI and Element-UI-X into a Vue.js application's `main.js` file. By using `Vue.use()`, all components from these libraries are registered globally, making them accessible throughout the application without individual imports.

```javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import ElementUIX from 'vue-element-ui-x';

// Import Element UI
Vue.use(ElementUI);

// Import Element-UI-X
Vue.use(ElementUIX);

new Vue({
  el: '#app',
  render: h => h(App),
});
```

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

### Install Element-UI-X via Package Managers

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/README.md

This snippet demonstrates how to install the `vue-element-ui-x` library using popular Node.js package managers: npm, pnpm (recommended), and yarn. Choose the command that corresponds to your preferred package manager to add the library to your project dependencies.

```bash
# NPM
npm install vue-element-ui-x

# PNPM（推荐）
pnpm install vue-element-ui-x

# Yarn
yarn install vue-element-ui-x
```

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

### Standard Component Directory Structure

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/develop.md

Defines the required directory structure for each component within the 'element-ui-x' library, including its root, sub-components, main Vue file, and entry point.

```plaintext
├── src            # Component root directory
|   └──components  # Sub-components (if any)
|   └──main.vue
├── index.js       # Component entry
```

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

### Basic Usage of Element UI X Welcome Component

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/components/welcome.md

Demonstrates the fundamental use of the `el-x-welcome` component with an icon, title, and description, providing a simple welcome message.

```html
<template>
  <el-x-welcome
    icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
    title="欢迎使用 Element UI X"
    description="基于 Element UI 的企业级中后台组件库扩展"
  />
</template>
```

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

### Element UI X Welcome Component API Reference

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/components/welcome.md

Comprehensive API documentation for the `el-x-welcome` component, detailing available props for configuration and slots for content customization.

```APIDOC
Properties:
- className: string - Custom class name for the component. Default: ''
- rootClassName: string - Custom class name for the root element. Default: ''
- variant: string - Component style variant. Options: 'filled', 'borderless'. Default: 'filled'
- direction: string - Layout direction. Options: 'ltr', 'rtl'. Default: 'ltr'
- classNames: object - Object for custom class names of various parts. Default: {}
- icon: string - URL for the icon image. Default: ''
- title: string - Title text. Default: ''
- extra: string/object - Additional content. Default: ''
- description: string - Description text. Default: ''
- styleConfig: object - Styles for the component container. Default: {}
- styles: object - Object for custom styles of various parts. Default: {}

Slots:
- image: Custom content for the icon area.
- extra: Custom content for the extra content area.
```

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

### Basic Usage of el-x-welcome Component (Vue.js HTML)

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/components/welcome.md

Demonstrates the fundamental usage of the `el-x-welcome` component. It showcases how to display an icon, title, and description using its basic attributes.

```html
<template>
  <el-x-welcome
    icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
    title="Welcome to Element UI X"
    description="An enterprise-level component library extension for Element UI"
  />
</template>
```

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

### Manually import and register a single Element-UI-X component

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/guide/installation.md

This JavaScript snippet shows how to manually import and register a specific component, like ElXTypewriter, from Element-UI-X into a Vue.js application. This method is suitable for on-demand component loading.

```javascript
import Vue from 'vue';
import { ElXTypewriter } from 'vue-element-ui-x';

Vue.component(ElXTypewriter.name, ElXTypewriter);
```

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

### Styling Variants for Element UI X Welcome Component

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/components/welcome.md

Illustrates the `filled` (default) and `borderless` variants of the `el-x-welcome` component, showcasing different visual styles for various design needs.

```html
<template>
  <div>
    <el-x-welcome
      icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
      title="默认填充样式 (filled)"
      description="带有背景色和边框的欢迎组件"
      style="margin-bottom: 20px;"
    />

    <el-x-welcome
      variant="borderless"
      icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
      title="无边框样式 (borderless)"
      description="不带背景和边框的简洁欢迎组件"
    />
  </div>
</template>
```

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

### Applying Different Styles to el-x-welcome Component (Vue.js HTML)

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/components/welcome.md

Illustrates how to apply different visual styles to the `el-x-welcome` component using the `variant` prop. Examples include the default `filled` style and the `borderless` style.

```html
<template>
  <div>
    <el-x-welcome
      icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
      title="Default Filled Style (filled)"
      description="A welcome component with a background color and border"
      style="margin-bottom: 20px;"
    />

    <el-x-welcome
      variant="borderless"
      icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
      title="Borderless Style (borderless)"
      description="A clean welcome component without a background or border"
    />
  </div>
</template>
```

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

### Element-UI-X Component API Reference

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/components/welcome.md

Comprehensive documentation for customizing an Element-UI-X component, including all supported attributes with their types, options, and default values, as well as available slots for content injection.

```APIDOC
Component Attributes:

- className:
  Description: Custom class name
  Type: String
  Options: —
  Default: ''

- rootClassName:
  Description: Custom class name for the root element
  Type: String
  Options: —
  Default: ''

- variant:
  Description: Component style variant
  Type: String
  Options: filled / borderless
  Default: 'filled'

- direction:
  Description: Layout direction
  Type: String
  Options: ltr / rtl
  Default: 'ltr'

- classNames:
  Description: Custom class name object for different parts
  Type: Object
  Options: —
  Default: {}

- icon:
  Description: Icon image address
  Type: String
  Options: —
  Default: ''

- title:
  Description: Title text
  Type: String
  Options: —
  Default: ''

- extra:
  Description: Extra content
  Type: String/Object
  Options: —
  Default: ''

- description:
  Description: Description text
  Type: String
  Options: —
  Default: ''

- styleConfig:
  Description: Component container style
  Type: Object
  Options: —
  Default: {}

- styles:
  Description: Custom style object for different parts
  Type: Object
  Options: —
  Default: {}

Component Slots:

- image:
  Description: Custom icon area content

- extra:
  Description: Custom extra content area
```

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

### Basic Usage of Thinking Component in Vue.js

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/components/thinking.md

Demonstrates the fundamental usage of the `el-x-thinking` component, showcasing its appearance and behavior across different `status` states: 'start', 'thinking', 'end', and 'error'. This example highlights how to initialize the component with various statuses and content.

```html
<template>
  <div>
    <el-x-thinking status="start" />

    <el-x-thinking
      status="thinking"
      content="Processing your request..."
      style="margin-top: 20px;"
    />

    <el-x-thinking
      status="end"
      content="Thinking complete. Results are as follows: 1. First point 2. Second point"
      style="margin-top: 20px;"
    />

    <el-x-thinking
      status="error"
      style="margin-top: 20px;"
    />
  </div>
</template>
```

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

### Control Element-UI-X Typewriter Component Methods via Refs

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/quickstart.md

This example demonstrates how to interact with an `el-x-typewriter` component by accessing its methods (`finishTyping`, `restart`) using Vue.js `ref` attributes. It shows how to create buttons that trigger these component-specific actions, providing external control over the typewriter's animation.

```HTML
<template>
  <div>
    <el-x-typewriter
      ref="typewriter"
      :content="text"
      :typing="{ interval: 40, step: 1 }"
    />

    <div class="demo-controls">
      <el-button-group>
        <el-button @click="finishTyping">Finish Immediately</el-button>
        <el-button @click="restart">Restart</el-button>
      </el-button-group>
    </div>
  </div>
</template>
```

```JavaScript
<script>
  export default {
    data() {
      return {
        text: 'This is a sample text',
      };
    },
    methods: {
      finishTyping() {
        this.$refs.typewriter.finishTyping();
      },
      restart() {
        this.$refs.typewriter.restart();
      },
    },
  };
</script>
```

```CSS
<style>
  .demo-controls {
    margin-top: 15px;
  }
</style>
```

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

### Manually Registering a Single Element-UI-X Component in Vue.js

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/README.md

This JavaScript snippet illustrates how to manually import and register a specific Element-UI-X component, `ElXTypewriter`, in a Vue.js application. This approach is part of an on-demand import strategy, allowing developers to include only necessary components and potentially reduce the final bundle size.

```javascript
import Vue from 'vue';
import { ElXTypewriter } from 'vue-element-ui-x';

// Register component
Vue.component(ElXTypewriter.name, ElXTypewriter);
```

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

### Basic Usage of el-x-bubble for Chat Display

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/components/bubble.md

This example demonstrates the fundamental implementation of the `el-x-bubble` component in a Vue.js template. It showcases how to render chat bubbles for different participants (e.g., bot and user) by adjusting the `placement` property to 'start' or 'end', along with setting `content`, `avatar`, and `avatarSize`.

```html
<template>
  <div>
    <el-x-bubble
      content="This is a basic left-side bubble example, typically used to display bot or other party messages."
      avatar="https://game.gtimg.cn/images/lol/act/img/tft/equip/HandofJustice.png"
      :avatarSize="40"
      placement="start"
    />

    <div style="margin-top: 20px;">
      <el-x-bubble
        content="This is a basic right-side bubble example, typically used to display user's own messages."
        :avatarSize="40"
        avatar="https://game.gtimg.cn/images/lol/act/img/tft/equip/tft_set10_emblem_pbj.png"
        placement="end"
      ></el-x-bubble>
    </div>
  </div>
</template>
```

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

### Control el-x-typewriter Component Typing: Start, Pause, Continue, Reset

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/components/typewriter.md

This example demonstrates controlling the `el-x-typewriter` component's typing flow. It uses `interrupt()` and `continueTyping()` methods for pausing and resuming, along with `restart()` for starting/resetting. The snippet also tracks typing progress and updates UI elements accordingly.

```HTML
<template>
  <div>
    <el-x-typewriter
      :content="controlContent"
      :typing="{ interval: 40, step: 1 }"
      ref="controlDemo"
      @start="onStart"
      @writing="onWriting"
      @finish="onFinish"
      @interrupt="onInterrupt"
    />

    <div class="progress-bar">
      <el-progress
        :percentage="progress"
        :show-text="false"
      ></el-progress>
      <div class="progress-text">{{ Math.floor(progress) }}%</div>
    </div>

    <div class="demo-controls">
      <el-button-group>
        <el-button
          size="small"
          type="primary"
          @click="startControl"
        >
          Start
        </el-button>
        <el-button
          size="small"
          type="warning"
          :disabled="!isTyping || progress >= 100"
          @click="pauseControl"
        >
          Pause
        </el-button>
        <el-button
          size="small"
          type="success"
          :disabled="isTyping || progress >= 100"
          @click="continueControl"
        >
          Continue
        </el-button>
        <el-button
          size="small"
          @click="resetControl"
        >
          Reset
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>
```

```JavaScript
<script>
  export default {
    data() {
      return {
        controlContent:
          'This example demonstrates how to control the typing process, including start, pause, continue, and reset functions. You can experience these control functions through the buttons below.',
        isTyping: false,
        progress: 0,
      };
    },
    methods: {
      startControl() {
        this.$refs.controlDemo.restart();
      },
      pauseControl() {
        this.$refs.controlDemo.interrupt();
      },
      continueControl() {
        this.$refs.controlDemo.continueTyping();
      },
      resetControl() {
        this.progress = 0;
        this.$refs.controlDemo.restart();
      },
      onStart() {
        this.isTyping = true;
      },
      onWriting({ progress }) {
        this.progress = progress;
        this.isTyping = true;
      },
      onFinish() {
        this.isTyping = false;
      },
      onInterrupt() {
        this.isTyping = false;
      },
    },
  };
</script>
```

```CSS
<style>
  .progress-bar {
    margin: 15px 0;
    display: flex;
    align-items: center;
  }
  .progress-text {
    margin-left: 10px;
    width: 40px;
  }
</style>
```

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

### Customizing Styles for Element UI X Welcome Component

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/components/welcome.md

Shows how to apply custom styles to the component container and its internal parts using `styleConfig` for the root element and `styles` for specific sub-elements, enabling fine-grained visual control.

```html
<template>
  <el-x-welcome
    icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
    title="自定义样式"
    description="通过样式属性定制组件外观"
    :styleConfig="{
      background: '#f0f9eb',
      border: '1px solid #e1f3d8',
      borderRadius: '12px',
    }"
    :styles="{
      icon: { background: '#f0f9eb' },
      title: { color: '#67c23a', fontSize: '18px' },
      description: { color: '#85ce61' },
    }"
  />
</template>
```

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

### Implementing AI Response with Element-UI-X Typewriter Component in Vue.js

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/guide/quickstart.md

This example demonstrates how to integrate and use the 'el-x-typewriter' component from Element-UI-X within a Vue.js application to simulate an AI response with a typing effect. It includes the Vue component's template (HTML), script (JavaScript) for data management and component interaction, and styling (CSS) to create a chat-like user interface.

```html
<template>
  <div class="demo-container">
    <h3>AI Response Example</h3>

    <div class="chat-container">
      <div class="message user">
        <div class="avatar">User</div>
        <div class="content">Explain Vue's lifecycle hook functions</div>
      </div>

      <div class="message ai">
        <div class="avatar">AI</div>
        <div class="content">
          <el-x-typewriter
            :content="aiResponse"
            :typing="{ interval: 30, step: 1 }"
            @finish="onTypingComplete"
            ref="typewriter"
          />
        </div>
      </div>
    </div>

    <div class="actions">
      <el-button
        type="primary"
        @click="regenerateResponse"
      >
        Regenerate
      </el-button>
    </div>
  </div>
</template>
```

```javascript
<script>
  export default {
    data() {
      return {
        aiResponse:
          'Vue lifecycle hook functions are functions that are automatically executed at specific stages of a Vue instance. They mainly include:\n\n1. beforeCreate: Called after instance initialization, before data observation and event configuration\n2. created: Called after instance creation is complete, when data observation, properties and methods computation are finished\n3. beforeMount: Called before mounting begins\n4. mounted: Called after mounting is complete, when DOM elements can be accessed\n5. beforeUpdate: Called when data updates, before virtual DOM re-rendering\n6. updated: Called after virtual DOM re-rendering caused by data changes\n7. beforeDestroy: Called before instance destruction\n8. destroyed: Called after instance destruction',
      };
    },
    mounted() {
      // Automatically start typing effect after page load
      this.$nextTick(() => {
        this.$refs.typewriter.restart();
      });
    },
    methods: {
      onTypingComplete(instance) {
        console.log('Typing effect completed:', instance);
      },
      regenerateResponse() {
        // Simulate regenerating response
        this.$refs.typewriter.restart();
      },
    },
  };
</script>
```

```css
<style>
  .demo-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }

  .chat-container {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 15px;
    background-color: #f8f8f8;
    margin-bottom: 20px;
  }

  .message {
    display: flex;
    margin-bottom: 15px;
  }

  .message .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .message .content {
    margin-left: 10px;
    padding: 10px;
    border-radius: 4px;
    max-width: 80%;
  }
  .message.user {
    flex-direction: row-reverse;
  }
  .message.user .avatar {
    background-color: #67c23a;
  }

  .message.user .content {
    background-color: #f0f9eb;
  }

  .message.ai .avatar {
    background-color: #409eff;
  }

  .message.ai .content {
    background-color: #ecf5ff;
    white-space: pre-wrap;
  }

  .actions {
    text-align: center;
  }
</style>
```

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

### Basic Request State Management with sendMixin and Element UI

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/components/send-mixins.md

This example demonstrates the fundamental use of `sendMixin` to control the loading state of a single simulated request. It integrates with Element UI buttons to show 'loading', 'finish', and 'abort' states, updating a result display accordingly. The mixin handles the lifecycle of an asynchronous operation, allowing custom handlers for start, finish, and abort events.

```html
<template>
  <div class="container">
    <div class="btn-list">
      <el-button
        :disabled="loading"
        type="primary"
        @click="handleSend"
      >
        {{ loading ? 'Loading...' : 'Simulate Request' }}
      </el-button>
      <el-button
        :disabled="!loading"
        type="primary"
        @click="handleFinish"
      >
        Finish Request
      </el-button>
      <el-button
        :disabled="!loading"
        type="danger"
        @click="handleAbort"
      >
        Abort Request
      </el-button>
    </div>
    <div
      v-if="basicResult"
      class="result"
    >
      Result: {{ basicResult }}
    </div>
  </div>
</template>
```

```javascript
<script>
  let sendMixin = {};
  try {
    if (typeof window !== 'undefined' && window['vue-element-ui-x']) {
      sendMixin = window['vue-element-ui-x'].customMixins.sendMixin;
    } else if (typeof require !== 'undefined') {
      sendMixin = require('vue-element-ui-x').customMixins.sendMixin;
    }
  } catch (e) {
    sendMixin = {
      data() {
        return { loading: false };
      },
      methods: {
        initSend() {},
        handleSend() {},
        handleFinish() {},
        handleAbort() {},
      },
    };
  }
  export default {
    name: 'SendBasicDemo',
    mixins: [sendMixin],
    data() {
      return {
        basicResult: '',
      };
    },
    mounted() {
      // Initialize send configuration
      this.initSend({
        sendHandler: this.startFn,
        finishHandler: this.finishBasicRequest,
        abortHandler: this.abortBasicRequest,
        onAbort: this.onBasicAbort,
      });
    },
    methods: {
      async startFn() {
        // Perform an asynchronous operation here, such as making a request
        console.log('Starting simulated request');
        this.basicResult = '';
      },
      finishBasicRequest() {
        this.basicResult =
          'Request completed successfully! Time: ' + new Date().toLocaleTimeString();
        console.log('Basic request processing finished');
      },
      abortBasicRequest() {
        this.basicResult = 'Request was aborted';
        console.log('Basic request aborted', this.loading);
      },
      onBasicAbort() {
        console.log('Basic request abort callback');
      },
    },
  };
</script>
```

```css
<style>
  .container {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .btn-list {
    display: flex;
    gap: 12px;
  }
  .btn-list .el-button {
    width: fit-content;
  }
  .result {
    color: #67c23a;
    padding: 8px;
    background-color: #f0f9ff;
    border-radius: 4px;
  }
</style>
```

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

### Vue Component for SSE Stream Data Handling

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/en/components/stream-mixins.md

This comprehensive example showcases a Vue component that leverages the `streamMixin` to fetch, process, and display Server-Sent Events (SSE) data. It includes UI controls to start and cancel the stream, a watcher to update content based on incoming stream data, and logic to parse JSON chunks and handle stream completion. The component also demonstrates a fallback import mechanism for specific documentation environments.

```HTML
<template>
  <div class="container">
    <div class="btn-list">
      <el-button
        :disabled="streamLoading"
        @click="startSSE"
      >
        {{ streamLoading ? 'Loading...' : 'Get SSE Stream Data' }}
      </el-button>

      <el-button
        type="danger"
        :disabled="!streamLoading"
        @click="cancelStream"
      >
        Cancel Request
      </el-button>
    </div>
    <div
      v-if="streamError"
      class="error"
    >
      {{ streamError.message }}
    </div>

    <el-x-bubble
      v-if="content"
      :content="content"
      is-markdown
    ></el-x-bubble>
  </div>
</template>
```

```JavaScript
<script>
  let streamMixin = {};
  try {
    if (typeof window !== 'undefined' && window['vue-element-ui-x']) {
      streamMixin = window['vue-element-ui-x'].customMixins.streamMixin;
    } else if (typeof require !== 'undefined') {
      streamMixin = require('vue-element-ui-x').customMixins.streamMixin;
    }
  } catch (e) {
    streamMixin = {
      data() {
        return { streamData: [], streamError: null, streamLoading: false };
      },
      methods: {
        startStream() {},
        cancelStream() {},
        resetStream() {},
        createStreamProcessor() {},
      },
    };
  }
  export default {
    name: 'SSEStreamDemo',
    mixins: [streamMixin],
    data() {
      return {
        content: '',
      };
    },
    watch: {
      // Watch for changes in stream data and update content
      streamData: {
        handler(newData) {
          if (!newData || newData.length === 0) {
            this.content = '';
            return;
          }

          let text = '';
          for (let index = 0; index < newData.length; index++) {
            const chunk = newData[index].data;
            try {
              const parsedChunk = JSON.parse(chunk).content;
              text += parsedChunk;
            } catch (error) {
              // This end identifier is provided by the backend, hence the check here
              // In actual projects, this should be based on project requirements
              if (chunk === ' [DONE]') {
                // Handle the case where data reception is complete
                // console.log('Data reception complete');
              } else {
                console.error('Error parsing data:', error);
              }
            }
          }
          console.log('Text:', text);
          this.content = text;
        },
        deep: true,
      },
    },
    methods: {
      async startSSE() {
        try {
          const response = await fetch('https://testsse.element-ui-x.com/api/sse', {
            headers: { 'Content-Type': 'text/event-stream' },
          });
          const readableStream = response.body;
          await this.startStream({ readableStream });
        } catch (err) {
          console.error('Fetch error:', err);
        }
      },
    },
  };
</script>
```

```CSS
<style>
  .container {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .container .el-button {
    width: fit-content;
  }
  .container .markdown-body {
    background-color: transparent;
    padding: 12px;
  }
  .error {
    color: #f56c6c;
    margin-top: 8px;
  }
</style>
```

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

### Adding Extra Content to Element UI X Welcome Component

Source: https://github.com/worryzyy/element-ui-x/blob/master/docs/src/components/welcome.md

Demonstrates how to include additional content using the `extra` prop for simple text or the `extra` slot for complex elements like buttons, providing flexibility for interactive elements.

```html
<template>
  <div>
    <el-x-welcome
      icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
      title="带有额外内容的欢迎组件"
      description="通过 extra 属性添加简单文本内容"
      extra="2023-12-31"
      style="margin-bottom: 20px;"
    />

    <el-x-welcome
      icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
      title="使用插槽添加复杂内容"
      description="通过 extra 插槽可以添加按钮等交互元素"
    >
      <template #extra>
        <el-button
          type="primary"
          size="small"
        >
          开始使用
        </el-button>
      </template>
    </el-x-welcome>
  </div>
</template>
```