@aleph-alpha/chat-kit 5.8.0 → 5.9.0

package/src/components/composed/CkConversation/CkConversation.vue

@@ -12,9 +12,17 @@ import {
   UiAvatar,
   UiAvatarFallback,
   UiAvatarImage,
+  UiCodeBlock,
   UiSpinner,
 } from '@aleph-alpha/ui-library';
-import { Comment, Fragment, Text, computed, type VNode } from 'vue';
+import {
+  Comment,
+  Fragment,
+  Text,
+  computed,
+  useTemplateRef,
+  type VNode,
+} from 'vue';
 
 defineOptions({ name: 'CkConversation' });
 
@@ -53,7 +61,11 @@ const slots = defineSlots<{
   'agent-message-content': (props: { message: BaseMessage }) => void;
   /** Provide footer actions for the agent message */
   'agent-message-footer': (props: { message: BaseMessage }) => void;
-  /** Replace the default code block rendering inside agent markdown */
+  /**
+   * Replace the default code block rendering inside agent markdown. When not
+   * provided, fenced code blocks render with `UiCodeBlock` (syntax highlighting
+   * + copy button).
+   */
   'agent-message-code-block': (props: {
     code: string;
     language: string;
@@ -122,10 +134,26 @@ function hasHeaderActivity(message: BaseMessage): boolean {
     | undefined;
   return slot ? slot({ message }).some((vnode) => !isVNodeEmpty(vnode)) : false;
 }
+
+const layoutRef = useTemplateRef('layoutRef');
+
+/**
+ * Scroll so the message at `index` sits at the top of the viewport. `index` is
+ * the zero-based position among the rendered rows (any `thread-footer` counts
+ * as the trailing row); when omitted it scrolls to the last row.
+ *
+ * This only performs the scroll — it does not focus the message. Any
+ * accompanying focus handling must be done separately by the caller.
+ */
+function scrollToMessage(index?: number): void {
+  layoutRef.value?.scrollToMessage(index);
+}
+
+defineExpose({ scrollToMessage });
 </script>
 
 <template>
-  <CkConversationLayout :messages="messages">
+  <CkConversationLayout ref="layoutRef" :messages="messages">
     <template #user-message="{ message }">
       <div :class="{ 'ml-8': hasIcon }">
         <slot name="user-message" :message="message">
@@ -213,11 +241,13 @@ function hasHeaderActivity(message: BaseMessage): boolean {
               :content="getMessageText(message)"
               :classes="agentMarkdownClasses"
             >
-              <template
-                v-if="$slots['agent-message-code-block']"
-                #code-block="codeBlockProps"
-              >
-                <slot name="agent-message-code-block" v-bind="codeBlockProps" />
+              <template #code-block="codeBlockProps">
+                <slot name="agent-message-code-block" v-bind="codeBlockProps">
+                  <UiCodeBlock
+                    :code="codeBlockProps.code"
+                    :language="codeBlockProps.language || 'text'"
+                  />
+                </slot>
               </template>
             </CkMarkdownRenderer>
           </slot>