Skip to content

Commit f36621c

Browse files
author
Mihail Perevertkin
committed
add files for git actions
1 parent 2fd8192 commit f36621c

File tree

9 files changed

+261
-7
lines changed

9 files changed

+261
-7
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
name: Deploy Demo to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [ main, master ]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: write
10+
pages: write
11+
id-token: write
12+
13+
jobs:
14+
build-and-deploy:
15+
runs-on: ubuntu-latest
16+
17+
steps:
18+
- name: Checkout
19+
uses: actions/checkout@v4
20+
21+
- name: Setup Node.js
22+
uses: actions/setup-node@v4
23+
with:
24+
node-version: '20'
25+
cache: 'npm'
26+
27+
- name: Install root dependencies
28+
run: npm ci
29+
30+
- name: Build library
31+
working-directory: projects/ngx-open-web-ui-chat
32+
run: |
33+
npm install
34+
npm run build
35+
36+
- name: Install test-app dependencies
37+
working-directory: test-app
38+
run: npm install
39+
40+
- name: Build test-app for GitHub Pages
41+
working-directory: test-app
42+
run: npm run build:prod
43+
44+
- name: Deploy to GitHub Pages
45+
uses: peaceiris/actions-gh-pages@v3
46+
with:
47+
github_token: ${{ secrets.GITHUB_TOKEN }}
48+
publish_dir: ./test-app/dist/test-app/browser
49+
cname: false
50+
force_orphan: true
51+

‎README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,17 @@
44

55
Modern Angular 20 library for embedding OpenWebUI chat in your applications with full **conversation history**, **markdown support**, and **Angular 2025 architecture**.
66

7+
## 🌐 Live Demo
8+
9+
**[Try the live demo →](https://jealousym.github.io/ngx-open-web-ui-chat/)**
10+
11+
Interactive demo showcasing all features:
12+
- Dynamic configuration
13+
- Model selection
14+
- Real-time chat with conversation history
15+
- Markdown rendering
16+
- Multi-language support
17+
718
## ✨ Features
819

920
- 🚀 **Angular 2025 Ready** - Zoneless, Signals, Modern file structure

‎projects/ngx-open-web-ui-chat/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ Angular 20 component library for embedding OpenWebUI chat with conversation hist
66
[![TypeScript](https://img.shields.io/badge/TypeScript-5.8-blue)](https://www.typescriptlang.org/)
77
[![Zoneless](https://img.shields.io/badge/Zoneless-✓-green)]()
88
[![Signals](https://img.shields.io/badge/Signals-✓-blue)]()
9+
[![Demo](https://img.shields.io/badge/Demo-Live-blue)](https://jealousym.github.io/ngx-open-web-ui-chat/)
10+
11+
## 🌐 [Live Demo](https://jealousym.github.io/ngx-open-web-ui-chat/)
912

1013
## Features
1114

‎test-app/angular.json‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,46 @@
1919
"assets": [],
2020
"styles": ["src/styles.css"],
2121
"scripts": []
22-
}
22+
},
23+
"configurations": {
24+
"production": {
25+
"optimization": true,
26+
"outputHashing": "all",
27+
"sourceMap": false,
28+
"namedChunks": false,
29+
"extractLicenses": true,
30+
"budgets": [
31+
{
32+
"type": "initial",
33+
"maximumWarning": "2MB",
34+
"maximumError": "5MB"
35+
},
36+
{
37+
"type": "anyComponentStyle",
38+
"maximumWarning": "6kB",
39+
"maximumError": "10kB"
40+
}
41+
]
42+
},
43+
"development": {
44+
"optimization": false,
45+
"extractLicenses": false,
46+
"sourceMap": true
47+
}
48+
},
49+
"defaultConfiguration": "development"
2350
},
2451
"serve": {
2552
"builder": "@angular-devkit/build-angular:dev-server",
26-
"options": {
27-
"buildTarget": "test-app:build"
28-
}
53+
"configurations": {
54+
"production": {
55+
"buildTarget": "test-app:build:production"
56+
},
57+
"development": {
58+
"buildTarget": "test-app:build:development"
59+
}
60+
},
61+
"defaultConfiguration": "development"
2962
}
3063
}
3164
}

‎test-app/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@
55
"scripts": {
66
"start": "ng serve",
77
"build": "ng build",
8-
"watch": "ng build --watch"
8+
"build:prod": "ng build --configuration production --base-href /ngx-open-web-ui-chat/",
9+
"watch": "ng build --watch",
10+
"deploy": "npm run build:prod && npx angular-cli-ghpages --dir=dist/test-app/browser",
11+
"deploy:ci": "npx angular-cli-ghpages --dir=dist/test-app/browser --no-silent"
912
},
1013
"dependencies": {
1114
"@angular/animations": "^20.0.0",

‎test-app/src/app/app.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<demo-banner></demo-banner>
12
<div class="app-container">
23
<aside class="sidebar">
34
<h2>OpenWebUI Chat</h2>

‎test-app/src/app/app.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.app-container {
22
display: flex;
3-
height: 100vh;
3+
height: calc(100vh - 52px); // Subtract banner height
44
width: 100vw;
55
overflow: hidden;
66
background: #f5f7fa;

‎test-app/src/app/app.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ import { Component, ViewChild, OnInit, AfterViewInit, signal, computed } from '@
22
import { CommonModule } from '@angular/common';
33
import { FormsModule } from '@angular/forms';
44
import { OpenwebuiChatComponent } from 'ngx-open-web-ui-chat';
5+
import { DemoBannerComponent } from './demo-banner.component';
56

67
@Component({
78
selector: 'app-root',
89
standalone: true,
9-
imports: [OpenwebuiChatComponent, CommonModule, FormsModule],
10+
imports: [OpenwebuiChatComponent, CommonModule, FormsModule, DemoBannerComponent],
1011
templateUrl: './app.component.html',
1112
styleUrls: ['./app.component.scss']
1213
})

‎test-app/src/app/demo-banner.component.ts‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import { Component } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
4+
@Component({
5+
selector: 'demo-banner',
6+
standalone: true,
7+
imports: [CommonModule],
8+
template: `
9+
<div class="demo-banner">
10+
<div class="container">
11+
<span class="icon">🚀</span>
12+
<div class="content">
13+
<strong>Interactive Demo</strong>
14+
<p>Test the ngx-open-web-ui-chat component with your OpenWebUI instance</p>
15+
</div>
16+
<div class="links">
17+
<a href="https://github.com/JealousyM/ngx-open-web-ui-chat"
18+
target="_blank"
19+
rel="noopener"
20+
class="btn btn-github">
21+
<span class="icon-github">⭐</span>
22+
GitHub
23+
</a>
24+
<a href="https://www.npmjs.com/package/ngx-open-web-ui-chat"
25+
target="_blank"
26+
rel="noopener"
27+
class="btn btn-npm">
28+
📦 NPM
29+
</a>
30+
</div>
31+
</div>
32+
</div>
33+
`,
34+
styles: [`
35+
.demo-banner {
36+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
37+
color: white;
38+
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
39+
position: sticky;
40+
top: 0;
41+
z-index: 100;
42+
}
43+
44+
.container {
45+
max-width: 1600px;
46+
margin: 0 auto;
47+
padding: 12px 20px;
48+
display: flex;
49+
align-items: center;
50+
gap: 16px;
51+
}
52+
53+
.icon {
54+
font-size: 28px;
55+
animation: bounce 2s ease-in-out infinite;
56+
}
57+
58+
@keyframes bounce {
59+
0%, 100% { transform: translateY(0); }
60+
50% { transform: translateY(-5px); }
61+
}
62+
63+
.content {
64+
flex: 1;
65+
66+
strong {
67+
font-size: 16px;
68+
display: block;
69+
margin-bottom: 2px;
70+
font-weight: 700;
71+
}
72+
73+
p {
74+
margin: 0;
75+
font-size: 13px;
76+
opacity: 0.95;
77+
font-weight: 400;
78+
}
79+
}
80+
81+
.links {
82+
display: flex;
83+
gap: 8px;
84+
}
85+
86+
.btn {
87+
padding: 8px 16px;
88+
background: rgba(255, 255, 255, 0.2);
89+
backdrop-filter: blur(10px);
90+
color: white;
91+
text-decoration: none;
92+
border-radius: 6px;
93+
font-weight: 600;
94+
font-size: 14px;
95+
transition: all 0.2s;
96+
display: flex;
97+
align-items: center;
98+
gap: 6px;
99+
border: 1px solid rgba(255, 255, 255, 0.3);
100+
101+
&:hover {
102+
background: rgba(255, 255, 255, 0.3);
103+
transform: translateY(-2px);
104+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
105+
}
106+
107+
&:active {
108+
transform: translateY(0);
109+
}
110+
}
111+
112+
.btn-github {
113+
.icon-github {
114+
font-size: 16px;
115+
}
116+
}
117+
118+
@media (max-width: 768px) {
119+
.container {
120+
flex-wrap: wrap;
121+
gap: 12px;
122+
}
123+
124+
.content {
125+
flex: 1 1 100%;
126+
127+
strong {
128+
font-size: 14px;
129+
}
130+
131+
p {
132+
font-size: 12px;
133+
}
134+
}
135+
136+
.links {
137+
flex: 1 1 100%;
138+
justify-content: center;
139+
}
140+
141+
.btn {
142+
flex: 1;
143+
justify-content: center;
144+
font-size: 13px;
145+
padding: 6px 12px;
146+
}
147+
}
148+
`]
149+
})
150+
export class DemoBannerComponent {}
151+

0 commit comments

Comments
 (0)