CopilotKit/packages/angular/src/lib/components/chat/copilot-chat-view-scroll-view.html at main · codingwatching/CopilotKit · GitHub

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
<ng-template #scrollContent>
  <div [style.padding-bottom.px]="paddingBottom()">
    <div class="cpk:max-w-3xl cpk:mx-auto">
      @if (messageView()) {
      <copilot-slot
        [slot]="messageView()"
        [context]="messageViewContext()"
        [defaultComponent]="defaultMessageViewComponent"
      >
      </copilot-slot>
      } @else {
      <copilot-chat-message-view
        [messages]="messages()"
        [agentId]="agentId()"
        [inputClass]="messageViewClass()"
        [showCursor]="showCursor()"
        (assistantMessageThumbsUp)="assistantMessageThumbsUp.emit($event)"
        (assistantMessageThumbsDown)="assistantMessageThumbsDown.emit($event)"
        (assistantMessageReadAloud)="assistantMessageReadAloud.emit($event)"
        (assistantMessageRegenerate)="assistantMessageRegenerate.emit($event)"
        (userMessageCopy)="userMessageCopy.emit($event)"
        (userMessageEdit)="userMessageEdit.emit($event)"
      >
      </copilot-chat-message-view>
      } @if (hasSuggestions()) {
      <div class="cpk:pl-0 cpk:pr-4 cpk:@3xl:px-0 cpk:mt-4">
        <copilot-chat-suggestion-view
          [suggestions]="chatState?.suggestions?.() ?? []"
          inputClass="cpk:mb-3 cpk:lg:ml-4 cpk:lg:mr-4 cpk:ml-0 cpk:mr-0"
          (selectSuggestion)="
              chatState?.selectSuggestion($event.suggestion, $event.index)
            "
        />
      </div>
      }
    </div>
  </div>
</ng-template>

@if (!hasMounted()) {
<!-- SSR/Initial render without stick-to-bottom -->
<div
  class="cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:flex-1 cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden"
>
  <div class="cpk:px-4 cpk:@3xl:px-0">
    <ng-content></ng-content>
  </div>
</div>
} @else {
<div
  class="cpk:h-[calc(100vh-9rem)] cpk:flex cpk:flex-col cpk:min-h-0 cpk:relative"
>
  @if (autoScroll()) {
  <!-- Auto-scroll mode with StickToBottom directive -->
  <div
    #scrollContainer
    cdkScrollable
    copilotStickToBottom
    [enabled]="autoScroll()"
    [threshold]="10"
    [debounceMs]="0"
    [initialBehavior]="'smooth'"
    [resizeBehavior]="'smooth'"
    (isAtBottomChange)="onIsAtBottomChange($event)"
    [class]="computedClass()"
    class="cpk:flex-1 cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden"
  >
    <!-- Scrollable content wrapper -->
    <div class="cpk:px-4 cpk:@3xl:px-0">
      <!-- Content with padding-bottom matching React -->
      <ng-container [ngTemplateOutlet]="scrollContent"></ng-container>
    </div>
  </div>
  } @else {
  <!-- Manual scroll mode -->
  <div
    #scrollContainer
    cdkScrollable
    [class]="computedClass()"
    class="cpk:flex-1 cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden"
  >
    <div #contentContainer class="cpk:px-4 cpk:@3xl:px-0">
      <!-- Content with padding-bottom matching React -->
      <ng-container [ngTemplateOutlet]="scrollContent"></ng-container>
    </div>
  </div>
  } @if ((autoScroll() ? !isAtBottom() : showScrollButton()) && !isResizing()) {
  <div
    class="cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30"
    [style.bottom.px]="inputContainerHeight() + 16"
  >
    <copilot-slot
      [slot]="scrollToBottomButton()"
      [context]="
            autoScroll()
              ? scrollToBottomFromStickContext()
              : scrollToBottomContext()
          "
      [defaultComponent]="defaultScrollToBottomButtonComponent"
      [outputs]="
            autoScroll() ? scrollToBottomFromStickOutputs : scrollToBottomOutputs
          "
    >
    </copilot-slot>
  </div>
  }
</div>
}