financial-assistant

1
import { EventTypes } from "../../contracts/enums";
2
import { AssistantAnswer } from "../../contracts/interfaces";
3
import EventObserver from "../../observer/observer";
4

5
class Assistant {
6
  public tag: HTMLDivElement;
7
  private dialog: HTMLDivElement;
8
  private observer: EventObserver;
9
  private textField: HTMLTextAreaElement;
10

11
  constructor(observer: EventObserver) {
12
    this.tag = document.createElement("div");
13
    this.dialog = document.createElement("div");
14
    this.textField = document.createElement("textarea");
15

16
    this.observer = observer;
17
    this.observer.subscribe(
18
      EventTypes.ASSISTANT_ANSWER,
19
      this.handleApiCall.bind(this)
20
    );
21
  }
22

23
  public renderAssistantPage(): void {
24
    this.tag = document.createElement("div");
25
    this.tag.classList.add("assistant__wrapper");
26

27
    this.dialog = document.createElement("div");
28
    this.dialog.classList.add("assistant__dialog");
29

30
    const form = document.createElement("form");
31
    form.classList.add("assistant__form");
32

33
    this.textField = document.createElement("textarea");
34
    this.textField.classList.add("assistant__textarea");
35
    this.textField.addEventListener(
36
      "keydown",
37
      this.handleEnterPress.bind(this)
38
    );
39

40
    const sendButton = document.createElement("div");
41
    sendButton.classList.add("assistant__send-button");
42
    sendButton.addEventListener("click", (event) =>
43
      this.handleEnterPress(event as PointerEvent)
44
    );
45

46
    form.append(this.textField, sendButton);
47
    this.tag.append(this.dialog, form);
48
  }
49

50
  private setUserMessage(inputText: string) {
51
    const message = document.createElement("div");
52
    message.classList.add("message__user");
53
    message.textContent = inputText;
54
    this.dialog.appendChild(message);
55
  }
56

57
  private handleEnterPress(event: KeyboardEvent | PointerEvent): void {
58
    if (
59
      (event instanceof KeyboardEvent && event.key === "Enter") ||
60
      event instanceof PointerEvent
61
    ) {
62
      event.preventDefault();
63
      if (this.textField.value === "") return;
64
      this.setUserMessage(this.textField.value);
65

66
      this.observer.notify(EventTypes.ENTER_PRESSED, this.textField.value);
67
      this.textField.value = "";
68
    }
69
  }
70

71
  private highlightCategory(data: string, className: string): HTMLDivElement {
72
    const div: HTMLDivElement = document.createElement("div");
73
    div.classList.add("highlight", className);
74
    data.replace(data.charAt(0), data.charAt(0).toUpperCase());
75
    div.textContent = data.replace(
76
      data.charAt(0),
77
      data.charAt(0).toUpperCase()
78
    );
79
    return div;
80
  }
81

82
  private getInfoBlock(
83
    bank: string,
84
    category: string,
85
    title: string
86
  ): HTMLDivElement {
87
    const bankBlock = this.highlightCategory(bank, "highlight__blue");
88
    const categoryBlock = this.highlightCategory(category, "highlight__green");
89
    const titleBlock = this.highlightCategory(title, "highlight__orange");
90

91
    const infoBlock = document.createElement("div");
92
    infoBlock.classList.add("highlight_block");
93
    infoBlock.append(bankBlock, categoryBlock, titleBlock);
94
    return infoBlock;
95
  }
96

97
  private getLinkBlock(link: string): HTMLDivElement {
98
    const linkBlock = document.createElement("div");
99
    const linkElement = document.createElement("a");
100
    linkElement.textContent = "Документ";
101
    linkElement.href = link;
102
    linkElement.target = "_blank";
103
    linkElement.classList.add("table__link");
104
    linkBlock.append(linkElement);
105

106
    return linkBlock;
107
  }
108

109
  private setAssistantMessage(
110
    bank: string,
111
    category: string,
112
    title: string,
113
    link: string,
114
    upperCaseAnswer: string
115
  ) {
116
    const infoBlock = this.getInfoBlock(bank, category, title);
117
    const linkBlock = this.getLinkBlock(link);
118
    const textBlock = document.createElement("div");
119
    textBlock.innerHTML = upperCaseAnswer;
120

121
    const message = document.createElement("div");
122
    message.classList.add("message__assistant");
123
    message.append(infoBlock, textBlock, linkBlock);
124

125
    this.dialog.append(message);
126
  }
127

128
  private handleApiCall(response: AssistantAnswer): void {
129
    const { bank, category, title, answer, link } = response;
130

131
    const answerMetadata = [bank, category, title];
132
    for (const data of answerMetadata) {
133
      data.replace(data.charAt(0), data.charAt(0).toUpperCase());
134
    }
135

136
    const upperCaseAnswer = answer
137
      .replace(/\n/g, "<br>")
138
      .replace(/\*\*(.*?)\*\*/g, "<b>$1</b>")
139
      .replace(/\-/g, "	•");
140

141
    this.setAssistantMessage(bank, category, title, link, upperCaseAnswer);
142
  }
143
}
144

145
export default Assistant;
146