Virsical AI Analysis

Introduction

Virsical AI Analysis is a React-based AI analysis component library that provides intelligent analysis dialog and analysis button components that can be easily integrated into your React applications. This component library supports Markdown rendering, streaming responses, copying analysis results, and other features to provide users with a smooth AI analysis experience.

Installation

Requirements

• Node.js 14.x or higher
• React 16.14.0 or higher
• Supports pnpm, npm, or yarn package managers

Installation Steps

1. Install dependencies using pnpm (recommended):

pnpm install virsical-ai-report-analysis

Or using npm:

npm install virsical-ai-report-analysis

Or using yarn:

yarn add virsical-ai-report-analysis

2. Import components in your project:

import AITool from 'virsical-ai-report-analysis';

const { Analysis, BtnAnalysis } = AITool;

Development Guide

Start Development Environment

Use the following commands to start the development environment:

# Using pnpm (recommended)
pnpm start:legacy

# Or using standard mode
pnpm start

Build Project

Use the following commands to build the project:

# Using pnpm (recommended)
pnpm build:legacy

# Or using standard mode
pnpm build

Run Tests

pnpm test

Component Usage

BtnAnalysis Component

BtnAnalysis is a button component that triggers AI analysis.

Parameters

| Parameter | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | handleClick | Function | Yes | - | Callback function when the button is clicked | | className | String | No | - | Custom style class name | | style | Object | No | - | Custom inline style |

Usage Example

import React, { useState } from 'react';
import AITool from 'virsical-ai-report-analysis';

const { BtnAnalysis } = AITool;

function MyComponent() {
  const [analysisVisible, setAnalysisVisible] = useState(false);
  const [analysisQuestion, setAnalysisQuestion] = useState('');

  return (
    <div>
      <BtnAnalysis
        handleClick={() => {
          setAnalysisVisible(true);
          setAnalysisQuestion('Please analyze the key information in this text');
        }}
      />
    </div>
  );
}

Analysis Component

Analysis is an AI analysis dialog component used to display AI analysis results.

Parameters

| Parameter | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | visible | Boolean | Yes | - | Controls the display and hiding of the dialog | | analysisQuestion | String | Yes | - | Question or text to be analyzed | | handleVisible | Function | Yes | - | Callback function to control the dialog display status | | Authorization | String | Yes | - | Authentication information, format is "bearer {token}" | | requestUrl | String | Yes | - | Request address for the AI analysis service | | signatureKey | String | No | - | Signature key (if signature verification is required) | | restfulSignature | Boolean | No | false | Whether to use RESTful signature | | className | String | No | - | Custom style class name | | style | Object | No | - | Custom inline style | | payload | Object | No | {} | Additional request parameters |

Usage Example

import React, { useState } from 'react';
import AITool from 'virsical-ai-report-analysis';

const { Analysis, BtnAnalysis } = AITool;

function MyComponent() {
  const [analysisVisible, setAnalysisVisible] = useState(false);
  const [analysisQuestion, setAnalysisQuestion] = useState('');

  return (
    <div>
      <BtnAnalysis
        handleClick={() => {
          setAnalysisVisible(true);
          setAnalysisQuestion('Please analyze the key information in this text');
        }}
      />

      {analysisVisible && (
        <Analysis
          visible={analysisVisible}
          analysisQuestion={analysisQuestion}
          handleVisible={() => setAnalysisVisible(false)}
          Authorization="bearer YOUR_TOKEN_HERE"
          requestUrl="https://your-api-endpoint.com/ai/analysis"
          signatureKey="YOUR_SIGNATURE_KEY"
          restfulSignature={true}
        />
      )}
    </div>
  );
}

Complete Example

Here is a complete usage example:

import React, { useState } from 'react';
import AITool from 'virsical-ai-report-analysis';

const { Analysis, BtnAnalysis } = AITool;

function AIAnalysisDemo() {
  const [analysisVisible, setAnalysisVisible] = useState(false);
  const [analysisQuestion, setAnalysisQuestion] = useState('');

  return (
    <div>
      <h1>AI Analysis Example</h1>

      <BtnAnalysis
        handleClick={() => {
          setAnalysisVisible(true);
          setAnalysisQuestion('Biography of Li Bai');
        }}
      />

      {analysisVisible && (
        <Analysis
          visible={analysisVisible}
          analysisQuestion={analysisQuestion}
          handleVisible={() => setAnalysisVisible(false)}
          Authorization="bearer YOUR_TOKEN_HERE"
          requestUrl="https://your-api-endpoint.com/ai/analysis"
          signatureKey="YOUR_SIGNATURE_KEY"
          restfulSignature={true}
          payload={{
            // You can add additional request parameters
            language: 'en-US',
            maxTokens: 1000
          }}
        />
      )}
    </div>
  );
}

export default AIAnalysisDemo;

Features

1. Markdown Rendering: Supports AI responses in Markdown format, including tables, code blocks, etc.
2. Streaming Response: Real-time display of AI analysis results with typewriter effect.
3. Copy Function: One-click copying of analysis results.
4. Custom Styling: Support for customizing component styles through className and style attributes.
5. Responsive Design: Adapts to different screen sizes.

Notes

1. Please ensure you have valid API authentication information (Authorization) before use.
2. The request URL needs to support streaming response format.
3. If you encounter cross-origin issues, please ensure your API server has the correct CORS policy configured.
4. The component handles error cases internally, but it is recommended to add additional error handling logic in production environments.

FAQ

Q: Why is my Authorization invalid?

A: Please ensure the Authorization format is correct, usually "bearer {token}". Check if the token has expired or if the permissions are sufficient.

Q: How do I customize the style of the AI analysis dialog?

A: You can customize the style through className and style attributes, or modify CSS files in your project to override the default styles.

Q: What Markdown features does the component support?

A: The component uses react-markdown and the remark-gfm plugin, supporting standard Markdown syntax and GitHub Flavored Markdown extensions, including tables, task lists, strikethrough, etc.

Technical Support

If you have any questions or suggestions, please contact: [email protected]