|
| 1 | +# ai-assistant |
| 2 | + |
| 3 | +The ai-assistant library is a versatile and intelligent solution designed to seamlessly integrate AI-powered question-answering capabilities into Angular applications. This modular component allows developers to connect with configured AI models, enabling users to submit queries and receive AI-generated responses effortlessly. |
| 4 | + |
| 5 | +## Structure |
| 6 | + |
| 7 | +The Structure of the ai-assistant is as follows |
| 8 | +``` |
| 9 | +├── ai-assistant |
| 10 | +│ └──projects |
| 11 | +| └──ai-assistant-lib |
| 12 | +│ ├── src |
| 13 | +│ ├── assets |
| 14 | +| ├── icons |
| 15 | +| ├── images |
| 16 | +| ├── styles |
| 17 | +│ ├── lib |
| 18 | +│ |── components |
| 19 | +| |── constants |
| 20 | +| |── enums |
| 21 | +| |── interfaces |
| 22 | +| |── models |
| 23 | +| |── pipes |
| 24 | +| |── services |
| 25 | +| |── types |
| 26 | +|────(...other files) |
| 27 | +``` |
| 28 | + |
| 29 | +- The AI Assistant library offers a comprehensive set of features and components designed to help developers seamlessly integrate various elements into their AI assistant models with efficiency and ease.Here are some of components that it provides: |
| 30 | + |
| 31 | +## Components |
| 32 | + |
| 33 | +### co-pilot-message-actions |
| 34 | + |
| 35 | +- The co-pilot-message-actions component enables users to provide feedback on AI-generated responses by voting up or down. This feature helps improve the AI assistant’s performance by gathering user preferences and enhancing response quality over time. The component is designed for seamless integration and can be customized to align with specific user experience requirements. |
| 36 | + |
| 37 | +### co-pilot-image |
| 38 | + |
| 39 | +- The co-pilot-image component allows the display of images within AI-generated responses. This component enhances user interaction by providing visual context alongside text-based outputs. |
| 40 | + |
| 41 | +### co-pilot-video |
| 42 | + |
| 43 | +- The co-pilot-video component enables the integration of video content within AI-generated responses. This feature enhances user engagement by providing dynamic visual information alongside textual interactions. |
| 44 | + |
| 45 | +### co-pilot-related-topics |
| 46 | + |
| 47 | +- The co-pilot-related-topics component enhances user engagement by suggesting additional subjects pertinent to the current conversation. This feature encourages deeper exploration and understanding by presenting users with a curated list of related topics, fostering a more comprehensive and interactive experience. |
| 48 | + |
| 49 | +## Intsallation |
| 50 | + |
| 51 | +```bash |
| 52 | +npm install @sourceloop/ai-assistant |
| 53 | +``` |
| 54 | + |
| 55 | +### Pre-Install |
| 56 | + |
| 57 | +#### Building the Library |
| 58 | + |
| 59 | +- To build the library, run: |
| 60 | + |
| 61 | +```bash |
| 62 | +npm run build-library |
| 63 | +``` |
| 64 | + |
| 65 | +- Upon successful completion, the build output will be available at: |
| 66 | + |
| 67 | +```bash |
| 68 | +dist/ai-assistant |
| 69 | +``` |
| 70 | +#### Packaging the Library |
| 71 | + |
| 72 | +- To package the library as a .tgz file, execute: |
| 73 | + |
| 74 | +```bash |
| 75 | +npm run pack-lib |
| 76 | +``` |
| 77 | + |
| 78 | +- Once completed, the packaged file will be generated at: |
| 79 | + |
| 80 | +```bash |
| 81 | +npm dist/ai-assistant/ai-assistant-0.0.1.tgz |
| 82 | +``` |
| 83 | + |
| 84 | +#### Demo Application: demo-sandbox |
| 85 | + |
| 86 | +The repository includes a sample application named demo-sandbox, designed to demonstrate the integration of the ai-assistant library. |
| 87 | + |
| 88 | + - The app.component.ts and app.component.html files contain the necessary integration code for utilizing the ai-assistant library. |
| 89 | + |
| 90 | + |
| 91 | +## Run the sandbox |
| 92 | + |
| 93 | +from root of project reach to `demo-sandbox` and then `npm run start`. <br/> By default `http://localhost:4200` will be active |
| 94 | + |
| 95 | +## How to use targz in completely new project/repo? |
| 96 | + |
| 97 | +In your `package.json` do, |
| 98 | + |
| 99 | +``` |
| 100 | +"dependencies": { |
| 101 | + ...exisitng dependencies, |
| 102 | + "ai-assistant": "file:ai-assistant-0.0.1.tgz" |
| 103 | + |
| 104 | + }, |
| 105 | +``` |
| 106 | +This includes pre-requisite that `tgz` is packed from `library` and exists in your project/repo |
| 107 | + |
| 108 | +Make sure the name of `tgz` file in `package.json` matches the `tgz` file in your repository |
| 109 | + |
| 110 | +Then do `npm install` it will install the library in your new project |
| 111 | + |
| 112 | +## Configuration |
| 113 | + |
| 114 | +To utilize the AI Assistant component, it is essential to configure specific parameters, such as the Server-Sent Events (SSE) URL. These configurations should be defined within your environment settings to ensure proper integration and functionality. |
| 115 | + |
| 116 | +Example configuration in your environment.ts: |
| 117 | + |
| 118 | +ts |
| 119 | +``` |
| 120 | +export const environment = { |
| 121 | + sseUrl: 'https://your-api-url.com/ai', // URL for the AI service |
| 122 | +}; |
| 123 | +``` |
| 124 | + |
| 125 | +## Structure of SSE API |
| 126 | + |
| 127 | +It is expected your structure of SSE API to be <br/> |
| 128 | + |
| 129 | +``` |
| 130 | +{ |
| 131 | + "chunk": "{{anytype here}}", |
| 132 | + "type": "{{ChunkTypes}}" |
| 133 | +} |
| 134 | +``` |
| 135 | + |
| 136 | +You can get more info on ChunkTypes from `ai-assistant/projects/ai-assistant/src/lib/types/chunk-response.types.ts` |
| 137 | + |
| 138 | + |
| 139 | +## Event Handling |
| 140 | + |
| 141 | +Upon successful configuration, the AI Assistant component will commence receiving events via Server-Sent Events (SSE). These events are transmitted in discrete segments, each potentially encompassing various data types, including but not limited to: |
| 142 | + |
| 143 | +- Image: An image provided by the AI service. |
| 144 | +- Video: A video provided by the AI service. |
| 145 | +- Related Topics: Suggestions for topics pertinent to the user's current context. |
| 146 | +- Feature: Notifications regarding unsupported features or limitations specific to certain tenants. |
| 147 | +Each event type is associated with a specific component responsible for rendering the appropriate content: |
| 148 | + |
| 149 | +- Image Events: Activate the ImageComponent to display the received image. |
| 150 | +- Video Events: Activate the VideoComponent to display the received video. |
| 151 | +This event-driven architecture ensures that each event is processed according to its type, thereby delivering accurate information or media to the user in a timely manner. |
| 152 | +Once your configuration is in place, the component will begin receiving events in chunks. These events may contain various types of data, including but not limited to: |
| 153 | + |
| 154 | +You can get more info on ChunkTypes from `/ai-assistant/projects/ai-assistant-lib/src/lib/components` |
| 155 | + |
| 156 | +For more details about Components ,refer [Here](/packages/ai-assistant/projects/ai-assistant-lib/README.md) |
0 commit comments