Add LLM chat history widget

src/components/graph/widgets/ChatHistoryWidget.vue

@@ -0,0 +1,135 @@
+<template>
+  <ScrollPanel
+    ref="scrollPanelRef"
+    class="w-full min-h-[400px] rounded-lg px-2 py-2 text-xs"
+    :pt="{ content: { id: 'chat-scroll-content' } }"
+  >
+    <div v-for="(item, i) in parsedHistory" :key="i" class="mb-4">
+      <!-- Prompt (user, right) -->
+      <span
+        :class="{
+          'opacity-40 pointer-events-none': editIndex !== null && i > editIndex
+        }"
+      >
+        <div class="flex justify-end mb-1">
+          <div
+            class="bg-gray-300 dark-theme:bg-gray-800 rounded-xl px-4 py-1 max-w-[80%] text-right"
+          >
+            <div class="break-words text-[12px]">{{ item.prompt }}</div>
+          </div>
+        </div>
+        <div class="flex justify-end mb-2 mr-1">
+          <CopyButton :text="item.prompt" />
+          <Button
+            v-tooltip="
+              editIndex === i ? $t('chatHistory.cancelEditTooltip') : null
+            "
+            text
+            rounded
+            class="!p-1 !h-4 !w-4 text-gray-400 hover:text-gray-600 dark-theme:hover:text-gray-200 transition"
+            pt:icon:class="!text-xs"
+            :icon="editIndex === i ? 'pi pi-times' : 'pi pi-pencil'"
+            :aria-label="
+              editIndex === i ? $t('chatHistory.cancelEdit') : $t('g.edit')
+            "
+            @click="editIndex === i ? handleCancelEdit() : handleEdit(i)"
+          />
+        </div>
+      </span>
+      <!-- Response (LLM, left) -->
+      <ResponseBlurb
+        :text="item.response"
+        :class="{
+          'opacity-25 pointer-events-none': editIndex !== null && i >= editIndex
+        }"
+      >
+        <div v-html="nl2br(linkifyHtml(item.response))" />
+      </ResponseBlurb>
+    </div>
+  </ScrollPanel>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import ScrollPanel from 'primevue/scrollpanel'
+import { computed, nextTick, ref, watch } from 'vue'
+
+import CopyButton from '@/components/graph/widgets/chatHistory/CopyButton.vue'
+import ResponseBlurb from '@/components/graph/widgets/chatHistory/ResponseBlurb.vue'
+import { ComponentWidget } from '@/scripts/domWidget'
+import { linkifyHtml, nl2br } from '@/utils/formatUtil'
+
+const { widget, history = '[]' } = defineProps<{
+  widget?: ComponentWidget<string>
+  history: string
+}>()
+
+const editIndex = ref<number | null>(null)
+const scrollPanelRef = ref<InstanceType<typeof ScrollPanel> | null>(null)
+
+const parsedHistory = computed(() => JSON.parse(history || '[]'))
+
+const findPromptInput = () =>
+  widget?.node.widgets?.find((w) => w.name === 'prompt')
+let promptInput = findPromptInput()
+const previousPromptInput = ref<string | null>(null)
+
+const getPreviousResponseId = (index: number) =>
+  index > 0 ? parsedHistory.value[index - 1]?.response_id ?? '' : ''
+
+const storePromptInput = () => {
+  promptInput ??= widget?.node.widgets?.find((w) => w.name === 'prompt')
+  if (!promptInput) return
+
+  previousPromptInput.value = String(promptInput.value)
+}
+
+const setPromptInput = (text: string, previousResponseId?: string | null) => {
+  promptInput ??= widget?.node.widgets?.find((w) => w.name === 'prompt')
+  if (!promptInput) return
+
+  if (previousResponseId !== null) {
+    promptInput.value = `<starting_point_id:${previousResponseId}>\n\n${text}`
+  } else {
+    promptInput.value = text
+  }
+}
+
+const handleEdit = (index: number) => {
+  if (!promptInput) return
+
+  editIndex.value = index
+  const prevResponseId = index === 0 ? 'start' : getPreviousResponseId(index)
+  const promptText = parsedHistory.value[index]?.prompt ?? ''
+
+  storePromptInput()
+  setPromptInput(promptText, prevResponseId)
+}
+
+const resetEditingState = () => {
+  editIndex.value = null
+}
+const handleCancelEdit = () => {
+  resetEditingState()
+  if (promptInput) {
+    promptInput.value = previousPromptInput.value ?? ''
+  }
+}
+
+const scrollChatToBottom = () => {
+  const content = document.getElementById('chat-scroll-content')
+  if (content) {
+    content.scrollTo({ top: content.scrollHeight, behavior: 'smooth' })
+  }
+}
+
+const onHistoryChanged = () => {
+  resetEditingState()
+  void nextTick(() => scrollChatToBottom())
+}
+
+watch(() => parsedHistory.value, onHistoryChanged, {
+  immediate: true,
+  deep: true
+})
+</script>

src/components/graph/widgets/DomWidget.vue

@@ -11,6 +11,7 @@
       v-if="isComponentWidget(widget)"
       :model-value="widget.value"
       :widget="widget"
+      v-bind="widget.props"
       @update:model-value="emit('update:widgetValue', $event)"
     />
   </div>

src/components/graph/widgets/chatHistory/CopyButton.vue

@@ -0,0 +1,36 @@
+<template>
+  <Button
+    v-tooltip="
+      copied ? $t('chatHistory.copiedTooltip') : $t('chatHistory.copyTooltip')
+    "
+    text
+    rounded
+    class="!p-1 !h-4 !w-6 text-gray-400 hover:text-gray-600 dark-theme:hover:text-gray-200 transition"
+    pt:icon:class="!text-xs"
+    :icon="copied ? 'pi pi-check' : 'pi pi-copy'"
+    :aria-label="
+      copied ? $t('chatHistory.copiedTooltip') : $t('chatHistory.copyTooltip')
+    "
+    @click="handleCopy"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { ref } from 'vue'
+
+const { text } = defineProps<{
+  text: string
+}>()
+
+const copied = ref(false)
+
+const handleCopy = async () => {
+  if (!text) return
+  await navigator.clipboard.writeText(text)
+  copied.value = true
+  setTimeout(() => {
+    copied.value = false
+  }, 1024)
+}
+</script>

src/components/graph/widgets/chatHistory/ResponseBlurb.vue

@@ -0,0 +1,22 @@
+<template>
+  <span>
+    <div class="flex justify-start mb-1">
+      <div class="rounded-xl px-4 py-1 max-w-[80%]">
+        <div class="break-words text-[12px]">
+          <slot />
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-start ml-1">
+      <CopyButton :text="text" />
+    </div>
+  </span>
+</template>
+
+<script setup lang="ts">
+import CopyButton from '@/components/graph/widgets/chatHistory/CopyButton.vue'
+
+defineProps<{
+  text: string
+}>()
+</script>

src/composables/node/useNodeChatHistory.ts

@@ -0,0 +1,60 @@
+import { LGraphNode } from '@comfyorg/litegraph'
+
+import type ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
+import { useChatHistoryWidget } from '@/composables/widgets/useChatHistoryWidget'
+
+const CHAT_HISTORY_WIDGET_NAME = '$$node-chat-history'
+
+/**
+ * Composable for handling node text previews
+ */
+export function useNodeChatHistory(
+  options: {
+    minHeight?: number
+    props?: Omit<InstanceType<typeof ChatHistoryWidget>['$props'], 'widget'>
+  } = {}
+) {
+  const chatHistoryWidget = useChatHistoryWidget(options)
+
+  const findChatHistoryWidget = (node: LGraphNode) =>
+    node.widgets?.find((w) => w.name === CHAT_HISTORY_WIDGET_NAME)
+
+  const addChatHistoryWidget = (node: LGraphNode) =>
+    chatHistoryWidget(node, {
+      name: CHAT_HISTORY_WIDGET_NAME,
+      type: 'chatHistory'
+    })
+
+  /**
+   * Shows chat history for a node
+   * @param node The graph node to show the chat history for
+   */
+  function showChatHistory(node: LGraphNode) {
+    if (!findChatHistoryWidget(node)) {
+      addChatHistoryWidget(node)
+    }
+    node.setDirtyCanvas?.(true)
+  }
+
+  /**
+   * Removes chat history from a node
+   * @param node The graph node to remove the chat history from
+   */
+  function removeChatHistory(node: LGraphNode) {
+    if (!node.widgets) return
+
+    const widgetIdx = node.widgets.findIndex(
+      (w) => w.name === CHAT_HISTORY_WIDGET_NAME
+    )
+
+    if (widgetIdx > -1) {
+      node.widgets[widgetIdx].onRemove?.()
+      node.widgets.splice(widgetIdx, 1)
+    }
+  }
+
+  return {
+    showChatHistory,
+    removeChatHistory
+  }
+}

src/composables/widgets/useChatHistoryWidget.ts

@@ -0,0 +1,43 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import { ref } from 'vue'
+
+import ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+const PADDING = 16
+
+export const useChatHistoryWidget = (
+  options: {
+    props?: Omit<InstanceType<typeof ChatHistoryWidget>['$props'], 'widget'>
+  } = {}
+) => {
+  const widgetConstructor: ComfyWidgetConstructorV2 = (
+    node: LGraphNode,
+    inputSpec: InputSpec
+  ) => {
+    const widgetValue = ref<string>('')
+    const widget = new ComponentWidgetImpl<
+      string | object,
+      InstanceType<typeof ChatHistoryWidget>['$props']
+    >({
+      node,
+      name: inputSpec.name,
+      component: ChatHistoryWidget,
+      props: options.props,
+      inputSpec,
+      options: {
+        getValue: () => widgetValue.value,
+        setValue: (value: string | object) => {
+          widgetValue.value = typeof value === 'string' ? value : String(value)
+        },
+        getMinHeight: () => 400 + PADDING
+      }
+    })
+    addWidget(node, widget)
+    return widget
+  }
+
+  return widgetConstructor
+}

src/composables/widgets/useProgressTextWidget.ts

@@ -8,7 +8,11 @@ import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
 const PADDING = 16
 
-export const useTextPreviewWidget = () => {
+export const useTextPreviewWidget = (
+  options: {
+    minHeight?: number
+  } = {}
+) => {
   const widgetConstructor: ComfyWidgetConstructorV2 = (
     node: LGraphNode,
     inputSpec: InputSpec
@@ -24,7 +28,7 @@ export const useTextPreviewWidget = () => {
         setValue: (value: string | object) => {
           widgetValue.value = typeof value === 'string' ? value : String(value)
         },
-        getMinHeight: () => 42 + PADDING
+        getMinHeight: () => options.minHeight ?? 42 + PADDING
       }
     })
     addWidget(node, widget)

src/locales/en/main.json

@@ -114,7 +114,9 @@
     "learnMore": "Learn more",
     "amount": "Amount",
     "unknownError": "Unknown error",
-    "title": "Title"
+    "title": "Title",
+    "edit": "Edit",
+    "copy": "Copy"
   },
   "manager": {
     "title": "Custom Nodes Manager",
@@ -1406,5 +1408,12 @@
       "tooltip": "Execute to selected output nodes (Highlighted with orange border)",
       "disabledTooltip": "No output nodes selected"
     }
+  },
+  "chatHistory": {
+    "cancelEdit": "Cancel",
+    "editTooltip": "Edit message",
+    "cancelEditTooltip": "Cancel edit",
+    "copiedTooltip": "Copied",
+    "copyTooltip": "Copy message to clipboard"
   }
 }

src/locales/es/main.json

@@ -102,6 +102,13 @@
       "title": "Crea una cuenta"
     }
   },
+  "chatHistory": {
+    "cancelEdit": "Cancelar",
+    "cancelEditTooltip": "Cancelar edición",
+    "copiedTooltip": "Copiado",
+    "copyTooltip": "Copiar mensaje al portapapeles",
+    "editTooltip": "Editar mensaje"
+  },
   "clipboard": {
     "errorMessage": "Error al copiar al portapapeles",
     "errorNotSupported": "API del portapapeles no soportada en su navegador",
@@ -277,6 +284,7 @@
     "continue": "Continuar",
     "control_after_generate": "control después de generar",
     "control_before_generate": "control antes de generar",
+    "copy": "Copiar",
     "copyToClipboard": "Copiar al portapapeles",
     "currentUser": "Usuario actual",
     "customize": "Personalizar",
@@ -288,6 +296,7 @@
     "disableAll": "Deshabilitar todo",
     "disabling": "Deshabilitando",
     "download": "Descargar",
+    "edit": "Editar",
     "empty": "Vacío",
     "enableAll": "Habilitar todo",
     "enabled": "Habilitado",