Description
UI for some basic user guide,
used within the AssistantDialog.
Example
Methods
|
Async
restartDemo
|
restartDemo()
|
|
|
|
|
|
isDemoMode
|
Type : boolean
|
Default value : environment.demo_mode
|
|
|
|
isMockMode
|
Type : boolean
|
Default value : environment.session_type === SessionType.mock
|
|
|
|
isSaaS
|
Type : boolean
|
Default value : environment.SaaS
|
|
|
|
isUserSupportEnabled
|
Type : boolean
|
Default value : environment.userSupportEnabled
|
|
|
import { Component, inject, ChangeDetectionStrategy } from "@angular/core";
import { MatButtonModule } from "@angular/material/button";
import { environment } from "../../../../environments/environment";
import { SessionType } from "../../session/session-type";
import { BackupService } from "../../admin/backup/backup.service";
/**
* UI for some basic user guide,
* used within the AssistantDialog.
*/
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-context-aware-assistant",
imports: [MatButtonModule],
templateUrl: "./context-aware-assistant.component.html",
styleUrls: ["./context-aware-assistant.component.scss"],
})
/**
* This component is used to provide context-aware assistance to users.
* It can be used to guide users through the setup process or provide help based on the current context.
*/
export class ContextAwareAssistantComponent {
isMockMode: boolean = environment.session_type === SessionType.mock;
isDemoMode: boolean = environment.demo_mode;
isUserSupportEnabled: boolean = environment.userSupportEnabled;
isSaaS: boolean = environment.SaaS;
private readonly backupService = inject(BackupService);
async restartDemo() {
if (environment.session_type !== SessionType.mock) {
await this.backupService.resetApplication();
} else {
window.location.href = "/";
}
}
}
<div class="flex-column gap-regular full-height-container">
<div i18n>Hi there! Need help setting up or using the application?</div>
<div i18n>
I am here to assist you. We are working on making this assistant more and
more interactive and aware of your system.
</div>
<div class="important-message" i18n>
Use the tabs and context menu above to access tools like the Setup Wizard.
</div>
<div class="user-guides-block important-message" i18n>
Find help and user guides in our
<a
href="https://chatwoot.help/hc/aam-digital/en"
target="_blank"
rel="noopener noreferrer"
>Support Center</a
>.
</div>
@if (isSaaS) {
@if (isUserSupportEnabled) {
<div i18n>
If you have any technical questions or problems, don't hesitate to
contact us at
<a href="mailto:support@aam-digital.app">support@aam-digital.app</a
>. Our support team is happy to help!
</div>
} @else {
<div i18n>
Your current subscription plan does not include personal user support.
</div>
}
}
<div i18n>
You can also discuss your questions and ideas with Aam Digital's
<a
href="https://github.com/Aam-Digital/ndb-core/discussions"
target="_blank"
rel="noopener noreferrer"
>open source Community</a
>.
</div>
<div class="align-end">
<!-- Spacer to move remaining content to bottom -->
</div>
@if (isMockMode) {
<div class="margin-top-large" i18n>
You are currently using the temporary "Demo Mode". All changes will be
reset after closing or reloading the page.
</div>
}
@if (isDemoMode) {
<div class="action-button flex-row">
<button mat-stroked-button class="flex-grow" (click)="restartDemo()" i18n>
Restart demo with different use case
</button>
</div>
}
</div>
@use "@angular/material/core/style/elevation" as mat-elevation;
:host {
display: block;
height: 100%;
}
.full-height-container {
height: calc(100% - 16px);
}
.important-message {
font-weight: bold;
}
.user-guides-block {
padding: 1em;
margin: 1em;
border-radius: 4px;
@include mat-elevation.elevation(1);
}
.align-end {
flex-grow: 1;
align-content: flex-end;
}
Legend
Html element with directive