All files / app/component/chat chat.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
2x
1x
 
2x
 
 
1x
2x
2x
2x
1x
2x
 
 
 
 
1x
2x
1x
 
1x
1x
2x
1x
 
 
 
2x
 
 
 
1x
 
2x
 
 
 
1x
 
 
1x
 
1x
 
 
2x
1x
 
 
 
1x
 
 
1x
1x
 
2x
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
1x
2x
 
1x
 
 
 
 
1x
1x
2x
1x
 
 
2x
 
 
1x
 
@if (!messages || loadingPrev) {
  <app-loading></app-loading>
}
@if (messages && !loadingPrev) {
  <a class="load-more fake-link" (click)="loadPrev()">load prev</a>
}
<cdk-virtual-scroll-viewport #viewport class="messages"
                             [class.scroll-lock]="scrollLock"
                             [itemSize]="itemSize"
                             [style.height.px]="containerHeight"
                             (scrolledIndexChange)="onScroll($event)">
  <app-chat-entry *cdkVirtualFor="let ref of messages; let index = index; let odd = odd"
                  [ref]="ref"
                  [class.odd]="odd"
                  (click)="scrollLock = index"
                  [focused]="scrollLock === index"></app-chat-entry>
</cdk-virtual-scroll-viewport>
@if (notAtBottom) {
  <div class="scroll-to-bottom" tabindex="0" (click)="scrollToBottom()" i18n>More messages below</div>
}
<div class="spacer"></div>
<div class="input-box"
     [class.dropping]="dropping"
     (dragenter)="dropping = true"
     (dragleave)="dragLeave($event)"
     (dragover)="$event.preventDefault()"
     (drop)="handleDrop($event)">
  @if (!config.websockets) {
    <button type="button"
            class="refresh"
            [title]="'last polled ' + lastPoll.toRelative()"
            (click)="refresh()" i18n>��</button>
  }
  @for (button of editorPushButtons; track button; let i = $index) {
    @if (!button.event) {
      <button type="button"
              (click)="toggleTag(button)"
              [title]="button.title" i18n>{{(buttonOn(button.toggle!) ? button.labelOn : button.labelOff) || button.label }}</button>
    }
  }
  <input type="text"
         i18n-placeholder
         placeholder="chat..."
         enterkeyhint="send"
         size="10"
         [value]="addText"
         (input)="addText = $any($event.target).value"
         (keydown)="$event.key === 'Enter' && add() || true"
         (paste)="handlePaste($event)"
         appAutofocus>
  <button type="button"
          class="add"
          i18n-title
          title="Send"
          (click)="add()" i18n>⏎</button>
</div>
@if (uploads.length) {
  <div class="upload-progress">
    <div class="upload-list">
      @for (upload of uploads; track upload.id) {
        <div class="upload-item">
          <div class="upload-filename">{{ upload.name }}</div>
          <div class="upload-controls">
            @if (upload.error) {
              <span class="upload-error">{{ upload.error }}</span>
            } @else if (upload.completed) {
              <span class="upload-complete" i18n>✅ Complete</span>
            } @else {
              <progress class="upload-progress-bar" max="100" [value]="upload.progress"></progress>
              <span class="upload-percentage">{{ upload.progress }}%</span>
            }
            @if (!upload.completed && !upload.error) {
              <button type="button"
                      class="upload-cancel"
                      (click)="cancelUpload(upload)"
                      i18n-title title="Cancel upload" i18n>&ndash;</button>
            }
          </div>
        </div>
      }
    </div>
    @if (uploads.length > 1) {
      <div class="upload-actions">
        <button type="button"
                class="upload-cancel-all"
                (click)="cancelAllUploads()"
                i18n>&ndash; remove all</button>
      </div>
    }
  </div>
  @if (hasActiveUploads()) {
    <app-loading class="upload-loading" [batch]="true"></app-loading>
  }
}
<span class="hints">
  @if (admin.getPlugin('plugin/latex')) {
    <input id="latex" type="checkbox" [checked]="latex" (input)="latex = !latex">
    <label for="latex" i18n>
      LaTeX plugin
      <sup><a target="_blank" href="https://katex.org/docs/supported.html">help</a></sup>
    </label>
  }
</span>
<div class="list-container">
  @for (ref of errored; track ref.origin + ref.url) {
    <button type="button" class="retry" (click)="retry(ref)" i18n>retry</button>
    <app-chat-entry [ref]="ref" [loading]="false"></app-chat-entry>
  }
  @for (ref of sending; track ref.url) {
    <app-chat-entry [ref]="ref"></app-chat-entry>
  }
</div>