@progress/kendo-vue-conversational-ui 4.3.0-dev.202401291303

package/dist/es/ai-prompt/views/AIPromptOutputView.js

@@ -0,0 +1,2048 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { AIPromptContent } from '../AIPromptContent';
+import { messages, aIPromptNoOutputs } from '../../messages/main';
+import { AIPromptViewRender } from './AIPromptViewRender';
+import { Card, CardActions, CardBody, CardHeader, CardSubtitle, CardTitle } from '@progress/kendo-vue-layout';
+import { copyIcon, rotateIcon, thumbUpOutlineIcon, thumbDownOutlineIcon, commentIcon, checkIcon } from '@progress/kendo-svg-icons';
+import { Button } from '@progress/kendo-vue-buttons';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { getListeners, getTemplate, templateRendering } from '@progress/kendo-vue-common';
+/**
+ * Specifies the default values for Output view Toolbar.
+ */
+export var outputViewDefaults = {
+  name: 'output-view',
+  buttonText: 'Output',
+  buttonIcon: commentIcon
+};
+/**
+ * @hidden
+ */
+var AIPromptOutputViewVue2 = {
+  name: 'KendoAIPromptOutputView',
+  props: {
+    outputs: Array,
+    outputCard: [String, Function, Object],
+    showOutputRating: Boolean
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  inject: {
+    kendoAIPrompt: {
+      default: null
+    },
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      copyButtonIcon: copyIcon
+    };
+  },
+  methods: {
+    retryPrompt: function retryPrompt(output) {
+      if (this.kendoAIPrompt.onPromptRequest) {
+        this.kendoAIPrompt.onPromptRequest.call(null, output.prompt, __assign(__assign({}, output), {
+          isRetry: true
+        }));
+      }
+    },
+    copyToClipboard: function copyToClipboard(output) {
+      var _this = this;
+      // Maybe we need to provide handler to the client for this
+      if (output === null || output === void 0 ? void 0 : output.responseContent) {
+        navigator.clipboard.writeText(output.responseContent);
+      }
+      this.copyButtonIcon = checkIcon;
+      setTimeout(function () {
+        _this.copyButtonIcon = copyIcon;
+      }, 1000);
+    },
+    outputRating: function outputRating(output, ratingType) {
+      if (this.kendoAIPrompt.onPromptRequest) {
+        this.kendoAIPrompt.onPromptRequest.call(null, output.prompt, __assign(__assign({}, output), {
+          ratingType: ratingType,
+          isRetry: false
+        }));
+      }
+    }
+  },
+  render: function render(createElement) {
+    var _this3 = this;
+    var h = gh || createElement;
+    var _a = this.$props,
+      outputs = _a.outputs,
+      showOutputRating = _a.showOutputRating,
+      outputCard = _a.outputCard;
+    var ls = provideLocalizationService(this);
+    var card = templateRendering.call(this, outputCard, getListeners.call(this));
+    return (
+      // @ts-ignore  function children
+      h(AIPromptViewRender, {
+        name: outputViewDefaults.name,
+        attrs: this.v3 ? undefined : {
+          name: outputViewDefaults.name
+        }
+      }, this.v3 ? function () {
+        return [
+        // @ts-ignore  function children
+        h(AIPromptContent, _this3.v3 ? function () {
+          return [h("div", {
+            "class": "k-card-list"
+          }, [outputs && outputs.length > 0 ? outputs.map(function (output) {
+            var _this2 = this;
+            var _this = this;
+            var outputCardRendering = getTemplate.call(this, {
+              h: h,
+              template: card,
+              defaultRendering: null,
+              additionalProps: {
+                output: output
+              }
+            });
+            return outputCard ? outputCardRendering :
+            // @ts-ignore  function children
+            h(Card, {
+              key: output.id
+            }, this.v3 ? function () {
+              return [
+              // @ts-ignore  function children
+              h(CardHeader, _this2.v3 ? function () {
+                return [output.title &&
+                // @ts-ignore  function children
+                h(CardTitle, _this2.v3 ? function () {
+                  return [output.title];
+                } : [output.title]), output.subTitle &&
+                // @ts-ignore  function children
+                h(CardSubtitle, _this2.v3 ? function () {
+                  return [output.subTitle];
+                } : [output.subTitle])];
+              } : [output.title && h(CardTitle, _this2.v3 ? function () {
+                return [output.title];
+              } : [output.title]), output.subTitle && h(CardSubtitle, _this2.v3 ? function () {
+                return [output.subTitle];
+              } : [output.subTitle])]),
+              // @ts-ignore  function children
+              h(CardBody, _this2.v3 ? function () {
+                return [output.responseContent];
+              } : [output.responseContent]),
+              // @ts-ignore  function children
+              h(CardActions, _this2.v3 ? function () {
+                return [
+                // @ts-ignore  function children
+                h(Button, {
+                  size: 'medium',
+                  attrs: _this2.v3 ? undefined : {
+                    size: 'medium',
+                    themeColor: 'primary',
+                    fillMode: 'flat',
+                    rounded: 'medium',
+                    title: 'Copy',
+                    svgIcon: _this2.copyButtonIcon,
+                    "aria-hidden": "true"
+                  },
+                  themeColor: 'primary',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Copy',
+                  svgIcon: _this2.copyButtonIcon,
+                  "aria-hidden": "true",
+                  onClick: function onClick() {
+                    return _this.copyToClipboard(output);
+                  },
+                  on: _this2.v3 ? undefined : {
+                    "click": function onClick() {
+                      return _this.copyToClipboard(output);
+                    }
+                  }
+                }, _this2.v3 ? function () {
+                  return ['Copy'];
+                } : ['Copy']),
+                // @ts-ignore  function children
+                h(Button, {
+                  size: 'medium',
+                  attrs: _this2.v3 ? undefined : {
+                    size: 'medium',
+                    themeColor: 'base',
+                    fillMode: 'flat',
+                    rounded: 'medium',
+                    title: 'Retry',
+                    svgIcon: rotateIcon,
+                    "aria-hidden": "true"
+                  },
+                  themeColor: 'base',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Retry',
+                  svgIcon: rotateIcon,
+                  "aria-hidden": "true",
+                  onClick: function onClick() {
+                    return _this.retryPrompt(output);
+                  },
+                  on: _this2.v3 ? undefined : {
+                    "click": function onClick() {
+                      return _this.retryPrompt(output);
+                    }
+                  }
+                }, _this2.v3 ? function () {
+                  return ['Retry'];
+                } : ['Retry']), showOutputRating && h("span", {
+                  "class": "k-spacer"
+                }), showOutputRating && h(Button, {
+                  size: 'medium',
+                  attrs: _this2.v3 ? undefined : {
+                    size: 'medium',
+                    themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+                    fillMode: 'flat',
+                    rounded: 'medium',
+                    title: 'Rate up',
+                    svgIcon: thumbUpOutlineIcon,
+                    "aria-hidden": "true"
+                  },
+                  themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Rate up',
+                  svgIcon: thumbUpOutlineIcon,
+                  "aria-hidden": "true",
+                  onClick: function onClick() {
+                    return _this.outputRating(output, 'positive');
+                  },
+                  on: _this2.v3 ? undefined : {
+                    "click": function onClick() {
+                      return _this.outputRating(output, 'positive');
+                    }
+                  }
+                }), showOutputRating && h(Button, {
+                  size: 'medium',
+                  attrs: _this2.v3 ? undefined : {
+                    size: 'medium',
+                    themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+                    fillMode: 'flat',
+                    rounded: 'medium',
+                    title: 'Rate down',
+                    svgIcon: thumbDownOutlineIcon,
+                    "aria-hidden": "true"
+                  },
+                  themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Rate down',
+                  svgIcon: thumbDownOutlineIcon,
+                  "aria-hidden": "true",
+                  onClick: function onClick() {
+                    return _this.outputRating(output, 'negative');
+                  },
+                  on: _this2.v3 ? undefined : {
+                    "click": function onClick() {
+                      return _this.outputRating(output, 'negative');
+                    }
+                  }
+                })];
+              } : [h(Button, {
+                size: 'medium',
+                attrs: _this2.v3 ? undefined : {
+                  size: 'medium',
+                  themeColor: 'primary',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Copy',
+                  svgIcon: _this2.copyButtonIcon,
+                  "aria-hidden": "true"
+                },
+                themeColor: 'primary',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Copy',
+                svgIcon: _this2.copyButtonIcon,
+                "aria-hidden": "true",
+                onClick: function onClick() {
+                  return _this.copyToClipboard(output);
+                },
+                on: _this2.v3 ? undefined : {
+                  "click": function onClick() {
+                    return _this.copyToClipboard(output);
+                  }
+                }
+              }, _this2.v3 ? function () {
+                return ['Copy'];
+              } : ['Copy']), h(Button, {
+                size: 'medium',
+                attrs: _this2.v3 ? undefined : {
+                  size: 'medium',
+                  themeColor: 'base',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Retry',
+                  svgIcon: rotateIcon,
+                  "aria-hidden": "true"
+                },
+                themeColor: 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Retry',
+                svgIcon: rotateIcon,
+                "aria-hidden": "true",
+                onClick: function onClick() {
+                  return _this.retryPrompt(output);
+                },
+                on: _this2.v3 ? undefined : {
+                  "click": function onClick() {
+                    return _this.retryPrompt(output);
+                  }
+                }
+              }, _this2.v3 ? function () {
+                return ['Retry'];
+              } : ['Retry']), showOutputRating && h("span", {
+                "class": "k-spacer"
+              }), showOutputRating && h(Button, {
+                size: 'medium',
+                attrs: _this2.v3 ? undefined : {
+                  size: 'medium',
+                  themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Rate up',
+                  svgIcon: thumbUpOutlineIcon,
+                  "aria-hidden": "true"
+                },
+                themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate up',
+                svgIcon: thumbUpOutlineIcon,
+                "aria-hidden": "true",
+                onClick: function onClick() {
+                  return _this.outputRating(output, 'positive');
+                },
+                on: _this2.v3 ? undefined : {
+                  "click": function onClick() {
+                    return _this.outputRating(output, 'positive');
+                  }
+                }
+              }), showOutputRating && h(Button, {
+                size: 'medium',
+                attrs: _this2.v3 ? undefined : {
+                  size: 'medium',
+                  themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Rate down',
+                  svgIcon: thumbDownOutlineIcon,
+                  "aria-hidden": "true"
+                },
+                themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate down',
+                svgIcon: thumbDownOutlineIcon,
+                "aria-hidden": "true",
+                onClick: function onClick() {
+                  return _this.outputRating(output, 'negative');
+                },
+                on: _this2.v3 ? undefined : {
+                  "click": function onClick() {
+                    return _this.outputRating(output, 'negative');
+                  }
+                }
+              })])];
+            } : [h(CardHeader, _this2.v3 ? function () {
+              return [output.title && h(CardTitle, _this2.v3 ? function () {
+                return [output.title];
+              } : [output.title]), output.subTitle && h(CardSubtitle, _this2.v3 ? function () {
+                return [output.subTitle];
+              } : [output.subTitle])];
+            } : [output.title && h(CardTitle, _this2.v3 ? function () {
+              return [output.title];
+            } : [output.title]), output.subTitle && h(CardSubtitle, _this2.v3 ? function () {
+              return [output.subTitle];
+            } : [output.subTitle])]), h(CardBody, _this2.v3 ? function () {
+              return [output.responseContent];
+            } : [output.responseContent]), h(CardActions, _this2.v3 ? function () {
+              return [h(Button, {
+                size: 'medium',
+                attrs: _this2.v3 ? undefined : {
+                  size: 'medium',
+                  themeColor: 'primary',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Copy',
+                  svgIcon: _this2.copyButtonIcon,
+                  "aria-hidden": "true"
+                },
+                themeColor: 'primary',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Copy',
+                svgIcon: _this2.copyButtonIcon,
+                "aria-hidden": "true",
+                onClick: function onClick() {
+                  return _this.copyToClipboard(output);
+                },
+                on: _this2.v3 ? undefined : {
+                  "click": function onClick() {
+                    return _this.copyToClipboard(output);
+                  }
+                }
+              }, _this2.v3 ? function () {
+                return ['Copy'];
+              } : ['Copy']), h(Button, {
+                size: 'medium',
+                attrs: _this2.v3 ? undefined : {
+                  size: 'medium',
+                  themeColor: 'base',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Retry',
+                  svgIcon: rotateIcon,
+                  "aria-hidden": "true"
+                },
+                themeColor: 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Retry',
+                svgIcon: rotateIcon,
+                "aria-hidden": "true",
+                onClick: function onClick() {
+                  return _this.retryPrompt(output);
+                },
+                on: _this2.v3 ? undefined : {
+                  "click": function onClick() {
+                    return _this.retryPrompt(output);
+                  }
+                }
+              }, _this2.v3 ? function () {
+                return ['Retry'];
+              } : ['Retry']), showOutputRating && h("span", {
+                "class": "k-spacer"
+              }), showOutputRating && h(Button, {
+                size: 'medium',
+                attrs: _this2.v3 ? undefined : {
+                  size: 'medium',
+                  themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Rate up',
+                  svgIcon: thumbUpOutlineIcon,
+                  "aria-hidden": "true"
+                },
+                themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate up',
+                svgIcon: thumbUpOutlineIcon,
+                "aria-hidden": "true",
+                onClick: function onClick() {
+                  return _this.outputRating(output, 'positive');
+                },
+                on: _this2.v3 ? undefined : {
+                  "click": function onClick() {
+                    return _this.outputRating(output, 'positive');
+                  }
+                }
+              }), showOutputRating && h(Button, {
+                size: 'medium',
+                attrs: _this2.v3 ? undefined : {
+                  size: 'medium',
+                  themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Rate down',
+                  svgIcon: thumbDownOutlineIcon,
+                  "aria-hidden": "true"
+                },
+                themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate down',
+                svgIcon: thumbDownOutlineIcon,
+                "aria-hidden": "true",
+                onClick: function onClick() {
+                  return _this.outputRating(output, 'negative');
+                },
+                on: _this2.v3 ? undefined : {
+                  "click": function onClick() {
+                    return _this.outputRating(output, 'negative');
+                  }
+                }
+              })];
+            } : [h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: 'primary',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Copy',
+                svgIcon: _this2.copyButtonIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: 'primary',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Copy',
+              svgIcon: _this2.copyButtonIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.copyToClipboard(output);
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.copyToClipboard(output);
+                }
+              }
+            }, _this2.v3 ? function () {
+              return ['Copy'];
+            } : ['Copy']), h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Retry',
+                svgIcon: rotateIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Retry',
+              svgIcon: rotateIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.retryPrompt(output);
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.retryPrompt(output);
+                }
+              }
+            }, _this2.v3 ? function () {
+              return ['Retry'];
+            } : ['Retry']), showOutputRating && h("span", {
+              "class": "k-spacer"
+            }), showOutputRating && h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate up',
+                svgIcon: thumbUpOutlineIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate up',
+              svgIcon: thumbUpOutlineIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.outputRating(output, 'positive');
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.outputRating(output, 'positive');
+                }
+              }
+            }), showOutputRating && h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate down',
+                svgIcon: thumbDownOutlineIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate down',
+              svgIcon: thumbDownOutlineIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.outputRating(output, 'negative');
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.outputRating(output, 'negative');
+                }
+              }
+            })])]);
+          }, _this3) :
+          // @ts-ignore  function children
+          h(Card, _this3.v3 ? function () {
+            return [
+            // @ts-ignore  function children
+            h(CardBody, _this3.v3 ? function () {
+              return [ls.toLanguageString(aIPromptNoOutputs, messages[aIPromptNoOutputs])];
+            } : [ls.toLanguageString(aIPromptNoOutputs, messages[aIPromptNoOutputs])])];
+          } : [h(CardBody, _this3.v3 ? function () {
+            return [ls.toLanguageString(aIPromptNoOutputs, messages[aIPromptNoOutputs])];
+          } : [ls.toLanguageString(aIPromptNoOutputs, messages[aIPromptNoOutputs])])])])];
+        } : [h("div", {
+          "class": "k-card-list"
+        }, [outputs && outputs.length > 0 ? outputs.map(function (output) {
+          var _this2 = this;
+          var _this = this;
+          var outputCardRendering = getTemplate.call(this, {
+            h: h,
+            template: card,
+            defaultRendering: null,
+            additionalProps: {
+              output: output
+            }
+          });
+          return outputCard ? outputCardRendering : h(Card, {
+            key: output.id
+          }, this.v3 ? function () {
+            return [h(CardHeader, _this2.v3 ? function () {
+              return [output.title && h(CardTitle, _this2.v3 ? function () {
+                return [output.title];
+              } : [output.title]), output.subTitle && h(CardSubtitle, _this2.v3 ? function () {
+                return [output.subTitle];
+              } : [output.subTitle])];
+            } : [output.title && h(CardTitle, _this2.v3 ? function () {
+              return [output.title];
+            } : [output.title]), output.subTitle && h(CardSubtitle, _this2.v3 ? function () {
+              return [output.subTitle];
+            } : [output.subTitle])]), h(CardBody, _this2.v3 ? function () {
+              return [output.responseContent];
+            } : [output.responseContent]), h(CardActions, _this2.v3 ? function () {
+              return [h(Button, {
+                size: 'medium',
+                attrs: _this2.v3 ? undefined : {
+                  size: 'medium',
+                  themeColor: 'primary',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Copy',
+                  svgIcon: _this2.copyButtonIcon,
+                  "aria-hidden": "true"
+                },
+                themeColor: 'primary',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Copy',
+                svgIcon: _this2.copyButtonIcon,
+                "aria-hidden": "true",
+                onClick: function onClick() {
+                  return _this.copyToClipboard(output);
+                },
+                on: _this2.v3 ? undefined : {
+                  "click": function onClick() {
+                    return _this.copyToClipboard(output);
+                  }
+                }
+              }, _this2.v3 ? function () {
+                return ['Copy'];
+              } : ['Copy']), h(Button, {
+                size: 'medium',
+                attrs: _this2.v3 ? undefined : {
+                  size: 'medium',
+                  themeColor: 'base',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Retry',
+                  svgIcon: rotateIcon,
+                  "aria-hidden": "true"
+                },
+                themeColor: 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Retry',
+                svgIcon: rotateIcon,
+                "aria-hidden": "true",
+                onClick: function onClick() {
+                  return _this.retryPrompt(output);
+                },
+                on: _this2.v3 ? undefined : {
+                  "click": function onClick() {
+                    return _this.retryPrompt(output);
+                  }
+                }
+              }, _this2.v3 ? function () {
+                return ['Retry'];
+              } : ['Retry']), showOutputRating && h("span", {
+                "class": "k-spacer"
+              }), showOutputRating && h(Button, {
+                size: 'medium',
+                attrs: _this2.v3 ? undefined : {
+                  size: 'medium',
+                  themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Rate up',
+                  svgIcon: thumbUpOutlineIcon,
+                  "aria-hidden": "true"
+                },
+                themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate up',
+                svgIcon: thumbUpOutlineIcon,
+                "aria-hidden": "true",
+                onClick: function onClick() {
+                  return _this.outputRating(output, 'positive');
+                },
+                on: _this2.v3 ? undefined : {
+                  "click": function onClick() {
+                    return _this.outputRating(output, 'positive');
+                  }
+                }
+              }), showOutputRating && h(Button, {
+                size: 'medium',
+                attrs: _this2.v3 ? undefined : {
+                  size: 'medium',
+                  themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Rate down',
+                  svgIcon: thumbDownOutlineIcon,
+                  "aria-hidden": "true"
+                },
+                themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate down',
+                svgIcon: thumbDownOutlineIcon,
+                "aria-hidden": "true",
+                onClick: function onClick() {
+                  return _this.outputRating(output, 'negative');
+                },
+                on: _this2.v3 ? undefined : {
+                  "click": function onClick() {
+                    return _this.outputRating(output, 'negative');
+                  }
+                }
+              })];
+            } : [h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: 'primary',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Copy',
+                svgIcon: _this2.copyButtonIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: 'primary',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Copy',
+              svgIcon: _this2.copyButtonIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.copyToClipboard(output);
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.copyToClipboard(output);
+                }
+              }
+            }, _this2.v3 ? function () {
+              return ['Copy'];
+            } : ['Copy']), h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Retry',
+                svgIcon: rotateIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Retry',
+              svgIcon: rotateIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.retryPrompt(output);
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.retryPrompt(output);
+                }
+              }
+            }, _this2.v3 ? function () {
+              return ['Retry'];
+            } : ['Retry']), showOutputRating && h("span", {
+              "class": "k-spacer"
+            }), showOutputRating && h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate up',
+                svgIcon: thumbUpOutlineIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate up',
+              svgIcon: thumbUpOutlineIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.outputRating(output, 'positive');
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.outputRating(output, 'positive');
+                }
+              }
+            }), showOutputRating && h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate down',
+                svgIcon: thumbDownOutlineIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate down',
+              svgIcon: thumbDownOutlineIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.outputRating(output, 'negative');
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.outputRating(output, 'negative');
+                }
+              }
+            })])];
+          } : [h(CardHeader, _this2.v3 ? function () {
+            return [output.title && h(CardTitle, _this2.v3 ? function () {
+              return [output.title];
+            } : [output.title]), output.subTitle && h(CardSubtitle, _this2.v3 ? function () {
+              return [output.subTitle];
+            } : [output.subTitle])];
+          } : [output.title && h(CardTitle, _this2.v3 ? function () {
+            return [output.title];
+          } : [output.title]), output.subTitle && h(CardSubtitle, _this2.v3 ? function () {
+            return [output.subTitle];
+          } : [output.subTitle])]), h(CardBody, _this2.v3 ? function () {
+            return [output.responseContent];
+          } : [output.responseContent]), h(CardActions, _this2.v3 ? function () {
+            return [h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: 'primary',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Copy',
+                svgIcon: _this2.copyButtonIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: 'primary',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Copy',
+              svgIcon: _this2.copyButtonIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.copyToClipboard(output);
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.copyToClipboard(output);
+                }
+              }
+            }, _this2.v3 ? function () {
+              return ['Copy'];
+            } : ['Copy']), h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Retry',
+                svgIcon: rotateIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Retry',
+              svgIcon: rotateIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.retryPrompt(output);
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.retryPrompt(output);
+                }
+              }
+            }, _this2.v3 ? function () {
+              return ['Retry'];
+            } : ['Retry']), showOutputRating && h("span", {
+              "class": "k-spacer"
+            }), showOutputRating && h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate up',
+                svgIcon: thumbUpOutlineIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate up',
+              svgIcon: thumbUpOutlineIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.outputRating(output, 'positive');
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.outputRating(output, 'positive');
+                }
+              }
+            }), showOutputRating && h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate down',
+                svgIcon: thumbDownOutlineIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate down',
+              svgIcon: thumbDownOutlineIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.outputRating(output, 'negative');
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.outputRating(output, 'negative');
+                }
+              }
+            })];
+          } : [h(Button, {
+            size: 'medium',
+            attrs: _this2.v3 ? undefined : {
+              size: 'medium',
+              themeColor: 'primary',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Copy',
+              svgIcon: _this2.copyButtonIcon,
+              "aria-hidden": "true"
+            },
+            themeColor: 'primary',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Copy',
+            svgIcon: _this2.copyButtonIcon,
+            "aria-hidden": "true",
+            onClick: function onClick() {
+              return _this.copyToClipboard(output);
+            },
+            on: _this2.v3 ? undefined : {
+              "click": function onClick() {
+                return _this.copyToClipboard(output);
+              }
+            }
+          }, _this2.v3 ? function () {
+            return ['Copy'];
+          } : ['Copy']), h(Button, {
+            size: 'medium',
+            attrs: _this2.v3 ? undefined : {
+              size: 'medium',
+              themeColor: 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Retry',
+              svgIcon: rotateIcon,
+              "aria-hidden": "true"
+            },
+            themeColor: 'base',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Retry',
+            svgIcon: rotateIcon,
+            "aria-hidden": "true",
+            onClick: function onClick() {
+              return _this.retryPrompt(output);
+            },
+            on: _this2.v3 ? undefined : {
+              "click": function onClick() {
+                return _this.retryPrompt(output);
+              }
+            }
+          }, _this2.v3 ? function () {
+            return ['Retry'];
+          } : ['Retry']), showOutputRating && h("span", {
+            "class": "k-spacer"
+          }), showOutputRating && h(Button, {
+            size: 'medium',
+            attrs: _this2.v3 ? undefined : {
+              size: 'medium',
+              themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate up',
+              svgIcon: thumbUpOutlineIcon,
+              "aria-hidden": "true"
+            },
+            themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Rate up',
+            svgIcon: thumbUpOutlineIcon,
+            "aria-hidden": "true",
+            onClick: function onClick() {
+              return _this.outputRating(output, 'positive');
+            },
+            on: _this2.v3 ? undefined : {
+              "click": function onClick() {
+                return _this.outputRating(output, 'positive');
+              }
+            }
+          }), showOutputRating && h(Button, {
+            size: 'medium',
+            attrs: _this2.v3 ? undefined : {
+              size: 'medium',
+              themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate down',
+              svgIcon: thumbDownOutlineIcon,
+              "aria-hidden": "true"
+            },
+            themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Rate down',
+            svgIcon: thumbDownOutlineIcon,
+            "aria-hidden": "true",
+            onClick: function onClick() {
+              return _this.outputRating(output, 'negative');
+            },
+            on: _this2.v3 ? undefined : {
+              "click": function onClick() {
+                return _this.outputRating(output, 'negative');
+              }
+            }
+          })])]);
+        }, _this3) : h(Card, _this3.v3 ? function () {
+          return [h(CardBody, _this3.v3 ? function () {
+            return [ls.toLanguageString(aIPromptNoOutputs, messages[aIPromptNoOutputs])];
+          } : [ls.toLanguageString(aIPromptNoOutputs, messages[aIPromptNoOutputs])])];
+        } : [h(CardBody, _this3.v3 ? function () {
+          return [ls.toLanguageString(aIPromptNoOutputs, messages[aIPromptNoOutputs])];
+        } : [ls.toLanguageString(aIPromptNoOutputs, messages[aIPromptNoOutputs])])])])])];
+      } : [h(AIPromptContent, _this3.v3 ? function () {
+        return [h("div", {
+          "class": "k-card-list"
+        }, [outputs && outputs.length > 0 ? outputs.map(function (output) {
+          var _this2 = this;
+          var _this = this;
+          var outputCardRendering = getTemplate.call(this, {
+            h: h,
+            template: card,
+            defaultRendering: null,
+            additionalProps: {
+              output: output
+            }
+          });
+          return outputCard ? outputCardRendering : h(Card, {
+            key: output.id
+          }, this.v3 ? function () {
+            return [h(CardHeader, _this2.v3 ? function () {
+              return [output.title && h(CardTitle, _this2.v3 ? function () {
+                return [output.title];
+              } : [output.title]), output.subTitle && h(CardSubtitle, _this2.v3 ? function () {
+                return [output.subTitle];
+              } : [output.subTitle])];
+            } : [output.title && h(CardTitle, _this2.v3 ? function () {
+              return [output.title];
+            } : [output.title]), output.subTitle && h(CardSubtitle, _this2.v3 ? function () {
+              return [output.subTitle];
+            } : [output.subTitle])]), h(CardBody, _this2.v3 ? function () {
+              return [output.responseContent];
+            } : [output.responseContent]), h(CardActions, _this2.v3 ? function () {
+              return [h(Button, {
+                size: 'medium',
+                attrs: _this2.v3 ? undefined : {
+                  size: 'medium',
+                  themeColor: 'primary',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Copy',
+                  svgIcon: _this2.copyButtonIcon,
+                  "aria-hidden": "true"
+                },
+                themeColor: 'primary',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Copy',
+                svgIcon: _this2.copyButtonIcon,
+                "aria-hidden": "true",
+                onClick: function onClick() {
+                  return _this.copyToClipboard(output);
+                },
+                on: _this2.v3 ? undefined : {
+                  "click": function onClick() {
+                    return _this.copyToClipboard(output);
+                  }
+                }
+              }, _this2.v3 ? function () {
+                return ['Copy'];
+              } : ['Copy']), h(Button, {
+                size: 'medium',
+                attrs: _this2.v3 ? undefined : {
+                  size: 'medium',
+                  themeColor: 'base',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Retry',
+                  svgIcon: rotateIcon,
+                  "aria-hidden": "true"
+                },
+                themeColor: 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Retry',
+                svgIcon: rotateIcon,
+                "aria-hidden": "true",
+                onClick: function onClick() {
+                  return _this.retryPrompt(output);
+                },
+                on: _this2.v3 ? undefined : {
+                  "click": function onClick() {
+                    return _this.retryPrompt(output);
+                  }
+                }
+              }, _this2.v3 ? function () {
+                return ['Retry'];
+              } : ['Retry']), showOutputRating && h("span", {
+                "class": "k-spacer"
+              }), showOutputRating && h(Button, {
+                size: 'medium',
+                attrs: _this2.v3 ? undefined : {
+                  size: 'medium',
+                  themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Rate up',
+                  svgIcon: thumbUpOutlineIcon,
+                  "aria-hidden": "true"
+                },
+                themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate up',
+                svgIcon: thumbUpOutlineIcon,
+                "aria-hidden": "true",
+                onClick: function onClick() {
+                  return _this.outputRating(output, 'positive');
+                },
+                on: _this2.v3 ? undefined : {
+                  "click": function onClick() {
+                    return _this.outputRating(output, 'positive');
+                  }
+                }
+              }), showOutputRating && h(Button, {
+                size: 'medium',
+                attrs: _this2.v3 ? undefined : {
+                  size: 'medium',
+                  themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+                  fillMode: 'flat',
+                  rounded: 'medium',
+                  title: 'Rate down',
+                  svgIcon: thumbDownOutlineIcon,
+                  "aria-hidden": "true"
+                },
+                themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate down',
+                svgIcon: thumbDownOutlineIcon,
+                "aria-hidden": "true",
+                onClick: function onClick() {
+                  return _this.outputRating(output, 'negative');
+                },
+                on: _this2.v3 ? undefined : {
+                  "click": function onClick() {
+                    return _this.outputRating(output, 'negative');
+                  }
+                }
+              })];
+            } : [h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: 'primary',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Copy',
+                svgIcon: _this2.copyButtonIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: 'primary',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Copy',
+              svgIcon: _this2.copyButtonIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.copyToClipboard(output);
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.copyToClipboard(output);
+                }
+              }
+            }, _this2.v3 ? function () {
+              return ['Copy'];
+            } : ['Copy']), h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Retry',
+                svgIcon: rotateIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Retry',
+              svgIcon: rotateIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.retryPrompt(output);
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.retryPrompt(output);
+                }
+              }
+            }, _this2.v3 ? function () {
+              return ['Retry'];
+            } : ['Retry']), showOutputRating && h("span", {
+              "class": "k-spacer"
+            }), showOutputRating && h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate up',
+                svgIcon: thumbUpOutlineIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate up',
+              svgIcon: thumbUpOutlineIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.outputRating(output, 'positive');
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.outputRating(output, 'positive');
+                }
+              }
+            }), showOutputRating && h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate down',
+                svgIcon: thumbDownOutlineIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate down',
+              svgIcon: thumbDownOutlineIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.outputRating(output, 'negative');
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.outputRating(output, 'negative');
+                }
+              }
+            })])];
+          } : [h(CardHeader, _this2.v3 ? function () {
+            return [output.title && h(CardTitle, _this2.v3 ? function () {
+              return [output.title];
+            } : [output.title]), output.subTitle && h(CardSubtitle, _this2.v3 ? function () {
+              return [output.subTitle];
+            } : [output.subTitle])];
+          } : [output.title && h(CardTitle, _this2.v3 ? function () {
+            return [output.title];
+          } : [output.title]), output.subTitle && h(CardSubtitle, _this2.v3 ? function () {
+            return [output.subTitle];
+          } : [output.subTitle])]), h(CardBody, _this2.v3 ? function () {
+            return [output.responseContent];
+          } : [output.responseContent]), h(CardActions, _this2.v3 ? function () {
+            return [h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: 'primary',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Copy',
+                svgIcon: _this2.copyButtonIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: 'primary',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Copy',
+              svgIcon: _this2.copyButtonIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.copyToClipboard(output);
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.copyToClipboard(output);
+                }
+              }
+            }, _this2.v3 ? function () {
+              return ['Copy'];
+            } : ['Copy']), h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Retry',
+                svgIcon: rotateIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Retry',
+              svgIcon: rotateIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.retryPrompt(output);
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.retryPrompt(output);
+                }
+              }
+            }, _this2.v3 ? function () {
+              return ['Retry'];
+            } : ['Retry']), showOutputRating && h("span", {
+              "class": "k-spacer"
+            }), showOutputRating && h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate up',
+                svgIcon: thumbUpOutlineIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate up',
+              svgIcon: thumbUpOutlineIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.outputRating(output, 'positive');
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.outputRating(output, 'positive');
+                }
+              }
+            }), showOutputRating && h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate down',
+                svgIcon: thumbDownOutlineIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate down',
+              svgIcon: thumbDownOutlineIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.outputRating(output, 'negative');
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.outputRating(output, 'negative');
+                }
+              }
+            })];
+          } : [h(Button, {
+            size: 'medium',
+            attrs: _this2.v3 ? undefined : {
+              size: 'medium',
+              themeColor: 'primary',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Copy',
+              svgIcon: _this2.copyButtonIcon,
+              "aria-hidden": "true"
+            },
+            themeColor: 'primary',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Copy',
+            svgIcon: _this2.copyButtonIcon,
+            "aria-hidden": "true",
+            onClick: function onClick() {
+              return _this.copyToClipboard(output);
+            },
+            on: _this2.v3 ? undefined : {
+              "click": function onClick() {
+                return _this.copyToClipboard(output);
+              }
+            }
+          }, _this2.v3 ? function () {
+            return ['Copy'];
+          } : ['Copy']), h(Button, {
+            size: 'medium',
+            attrs: _this2.v3 ? undefined : {
+              size: 'medium',
+              themeColor: 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Retry',
+              svgIcon: rotateIcon,
+              "aria-hidden": "true"
+            },
+            themeColor: 'base',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Retry',
+            svgIcon: rotateIcon,
+            "aria-hidden": "true",
+            onClick: function onClick() {
+              return _this.retryPrompt(output);
+            },
+            on: _this2.v3 ? undefined : {
+              "click": function onClick() {
+                return _this.retryPrompt(output);
+              }
+            }
+          }, _this2.v3 ? function () {
+            return ['Retry'];
+          } : ['Retry']), showOutputRating && h("span", {
+            "class": "k-spacer"
+          }), showOutputRating && h(Button, {
+            size: 'medium',
+            attrs: _this2.v3 ? undefined : {
+              size: 'medium',
+              themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate up',
+              svgIcon: thumbUpOutlineIcon,
+              "aria-hidden": "true"
+            },
+            themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Rate up',
+            svgIcon: thumbUpOutlineIcon,
+            "aria-hidden": "true",
+            onClick: function onClick() {
+              return _this.outputRating(output, 'positive');
+            },
+            on: _this2.v3 ? undefined : {
+              "click": function onClick() {
+                return _this.outputRating(output, 'positive');
+              }
+            }
+          }), showOutputRating && h(Button, {
+            size: 'medium',
+            attrs: _this2.v3 ? undefined : {
+              size: 'medium',
+              themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate down',
+              svgIcon: thumbDownOutlineIcon,
+              "aria-hidden": "true"
+            },
+            themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Rate down',
+            svgIcon: thumbDownOutlineIcon,
+            "aria-hidden": "true",
+            onClick: function onClick() {
+              return _this.outputRating(output, 'negative');
+            },
+            on: _this2.v3 ? undefined : {
+              "click": function onClick() {
+                return _this.outputRating(output, 'negative');
+              }
+            }
+          })])]);
+        }, _this3) : h(Card, _this3.v3 ? function () {
+          return [h(CardBody, _this3.v3 ? function () {
+            return [ls.toLanguageString(aIPromptNoOutputs, messages[aIPromptNoOutputs])];
+          } : [ls.toLanguageString(aIPromptNoOutputs, messages[aIPromptNoOutputs])])];
+        } : [h(CardBody, _this3.v3 ? function () {
+          return [ls.toLanguageString(aIPromptNoOutputs, messages[aIPromptNoOutputs])];
+        } : [ls.toLanguageString(aIPromptNoOutputs, messages[aIPromptNoOutputs])])])])];
+      } : [h("div", {
+        "class": "k-card-list"
+      }, [outputs && outputs.length > 0 ? outputs.map(function (output) {
+        var _this2 = this;
+        var _this = this;
+        var outputCardRendering = getTemplate.call(this, {
+          h: h,
+          template: card,
+          defaultRendering: null,
+          additionalProps: {
+            output: output
+          }
+        });
+        return outputCard ? outputCardRendering : h(Card, {
+          key: output.id
+        }, this.v3 ? function () {
+          return [h(CardHeader, _this2.v3 ? function () {
+            return [output.title && h(CardTitle, _this2.v3 ? function () {
+              return [output.title];
+            } : [output.title]), output.subTitle && h(CardSubtitle, _this2.v3 ? function () {
+              return [output.subTitle];
+            } : [output.subTitle])];
+          } : [output.title && h(CardTitle, _this2.v3 ? function () {
+            return [output.title];
+          } : [output.title]), output.subTitle && h(CardSubtitle, _this2.v3 ? function () {
+            return [output.subTitle];
+          } : [output.subTitle])]), h(CardBody, _this2.v3 ? function () {
+            return [output.responseContent];
+          } : [output.responseContent]), h(CardActions, _this2.v3 ? function () {
+            return [h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: 'primary',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Copy',
+                svgIcon: _this2.copyButtonIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: 'primary',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Copy',
+              svgIcon: _this2.copyButtonIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.copyToClipboard(output);
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.copyToClipboard(output);
+                }
+              }
+            }, _this2.v3 ? function () {
+              return ['Copy'];
+            } : ['Copy']), h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Retry',
+                svgIcon: rotateIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Retry',
+              svgIcon: rotateIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.retryPrompt(output);
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.retryPrompt(output);
+                }
+              }
+            }, _this2.v3 ? function () {
+              return ['Retry'];
+            } : ['Retry']), showOutputRating && h("span", {
+              "class": "k-spacer"
+            }), showOutputRating && h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate up',
+                svgIcon: thumbUpOutlineIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate up',
+              svgIcon: thumbUpOutlineIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.outputRating(output, 'positive');
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.outputRating(output, 'positive');
+                }
+              }
+            }), showOutputRating && h(Button, {
+              size: 'medium',
+              attrs: _this2.v3 ? undefined : {
+                size: 'medium',
+                themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+                fillMode: 'flat',
+                rounded: 'medium',
+                title: 'Rate down',
+                svgIcon: thumbDownOutlineIcon,
+                "aria-hidden": "true"
+              },
+              themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate down',
+              svgIcon: thumbDownOutlineIcon,
+              "aria-hidden": "true",
+              onClick: function onClick() {
+                return _this.outputRating(output, 'negative');
+              },
+              on: _this2.v3 ? undefined : {
+                "click": function onClick() {
+                  return _this.outputRating(output, 'negative');
+                }
+              }
+            })];
+          } : [h(Button, {
+            size: 'medium',
+            attrs: _this2.v3 ? undefined : {
+              size: 'medium',
+              themeColor: 'primary',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Copy',
+              svgIcon: _this2.copyButtonIcon,
+              "aria-hidden": "true"
+            },
+            themeColor: 'primary',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Copy',
+            svgIcon: _this2.copyButtonIcon,
+            "aria-hidden": "true",
+            onClick: function onClick() {
+              return _this.copyToClipboard(output);
+            },
+            on: _this2.v3 ? undefined : {
+              "click": function onClick() {
+                return _this.copyToClipboard(output);
+              }
+            }
+          }, _this2.v3 ? function () {
+            return ['Copy'];
+          } : ['Copy']), h(Button, {
+            size: 'medium',
+            attrs: _this2.v3 ? undefined : {
+              size: 'medium',
+              themeColor: 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Retry',
+              svgIcon: rotateIcon,
+              "aria-hidden": "true"
+            },
+            themeColor: 'base',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Retry',
+            svgIcon: rotateIcon,
+            "aria-hidden": "true",
+            onClick: function onClick() {
+              return _this.retryPrompt(output);
+            },
+            on: _this2.v3 ? undefined : {
+              "click": function onClick() {
+                return _this.retryPrompt(output);
+              }
+            }
+          }, _this2.v3 ? function () {
+            return ['Retry'];
+          } : ['Retry']), showOutputRating && h("span", {
+            "class": "k-spacer"
+          }), showOutputRating && h(Button, {
+            size: 'medium',
+            attrs: _this2.v3 ? undefined : {
+              size: 'medium',
+              themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate up',
+              svgIcon: thumbUpOutlineIcon,
+              "aria-hidden": "true"
+            },
+            themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Rate up',
+            svgIcon: thumbUpOutlineIcon,
+            "aria-hidden": "true",
+            onClick: function onClick() {
+              return _this.outputRating(output, 'positive');
+            },
+            on: _this2.v3 ? undefined : {
+              "click": function onClick() {
+                return _this.outputRating(output, 'positive');
+              }
+            }
+          }), showOutputRating && h(Button, {
+            size: 'medium',
+            attrs: _this2.v3 ? undefined : {
+              size: 'medium',
+              themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate down',
+              svgIcon: thumbDownOutlineIcon,
+              "aria-hidden": "true"
+            },
+            themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Rate down',
+            svgIcon: thumbDownOutlineIcon,
+            "aria-hidden": "true",
+            onClick: function onClick() {
+              return _this.outputRating(output, 'negative');
+            },
+            on: _this2.v3 ? undefined : {
+              "click": function onClick() {
+                return _this.outputRating(output, 'negative');
+              }
+            }
+          })])];
+        } : [h(CardHeader, _this2.v3 ? function () {
+          return [output.title && h(CardTitle, _this2.v3 ? function () {
+            return [output.title];
+          } : [output.title]), output.subTitle && h(CardSubtitle, _this2.v3 ? function () {
+            return [output.subTitle];
+          } : [output.subTitle])];
+        } : [output.title && h(CardTitle, _this2.v3 ? function () {
+          return [output.title];
+        } : [output.title]), output.subTitle && h(CardSubtitle, _this2.v3 ? function () {
+          return [output.subTitle];
+        } : [output.subTitle])]), h(CardBody, _this2.v3 ? function () {
+          return [output.responseContent];
+        } : [output.responseContent]), h(CardActions, _this2.v3 ? function () {
+          return [h(Button, {
+            size: 'medium',
+            attrs: _this2.v3 ? undefined : {
+              size: 'medium',
+              themeColor: 'primary',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Copy',
+              svgIcon: _this2.copyButtonIcon,
+              "aria-hidden": "true"
+            },
+            themeColor: 'primary',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Copy',
+            svgIcon: _this2.copyButtonIcon,
+            "aria-hidden": "true",
+            onClick: function onClick() {
+              return _this.copyToClipboard(output);
+            },
+            on: _this2.v3 ? undefined : {
+              "click": function onClick() {
+                return _this.copyToClipboard(output);
+              }
+            }
+          }, _this2.v3 ? function () {
+            return ['Copy'];
+          } : ['Copy']), h(Button, {
+            size: 'medium',
+            attrs: _this2.v3 ? undefined : {
+              size: 'medium',
+              themeColor: 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Retry',
+              svgIcon: rotateIcon,
+              "aria-hidden": "true"
+            },
+            themeColor: 'base',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Retry',
+            svgIcon: rotateIcon,
+            "aria-hidden": "true",
+            onClick: function onClick() {
+              return _this.retryPrompt(output);
+            },
+            on: _this2.v3 ? undefined : {
+              "click": function onClick() {
+                return _this.retryPrompt(output);
+              }
+            }
+          }, _this2.v3 ? function () {
+            return ['Retry'];
+          } : ['Retry']), showOutputRating && h("span", {
+            "class": "k-spacer"
+          }), showOutputRating && h(Button, {
+            size: 'medium',
+            attrs: _this2.v3 ? undefined : {
+              size: 'medium',
+              themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate up',
+              svgIcon: thumbUpOutlineIcon,
+              "aria-hidden": "true"
+            },
+            themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Rate up',
+            svgIcon: thumbUpOutlineIcon,
+            "aria-hidden": "true",
+            onClick: function onClick() {
+              return _this.outputRating(output, 'positive');
+            },
+            on: _this2.v3 ? undefined : {
+              "click": function onClick() {
+                return _this.outputRating(output, 'positive');
+              }
+            }
+          }), showOutputRating && h(Button, {
+            size: 'medium',
+            attrs: _this2.v3 ? undefined : {
+              size: 'medium',
+              themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+              fillMode: 'flat',
+              rounded: 'medium',
+              title: 'Rate down',
+              svgIcon: thumbDownOutlineIcon,
+              "aria-hidden": "true"
+            },
+            themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Rate down',
+            svgIcon: thumbDownOutlineIcon,
+            "aria-hidden": "true",
+            onClick: function onClick() {
+              return _this.outputRating(output, 'negative');
+            },
+            on: _this2.v3 ? undefined : {
+              "click": function onClick() {
+                return _this.outputRating(output, 'negative');
+              }
+            }
+          })];
+        } : [h(Button, {
+          size: 'medium',
+          attrs: _this2.v3 ? undefined : {
+            size: 'medium',
+            themeColor: 'primary',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Copy',
+            svgIcon: _this2.copyButtonIcon,
+            "aria-hidden": "true"
+          },
+          themeColor: 'primary',
+          fillMode: 'flat',
+          rounded: 'medium',
+          title: 'Copy',
+          svgIcon: _this2.copyButtonIcon,
+          "aria-hidden": "true",
+          onClick: function onClick() {
+            return _this.copyToClipboard(output);
+          },
+          on: _this2.v3 ? undefined : {
+            "click": function onClick() {
+              return _this.copyToClipboard(output);
+            }
+          }
+        }, _this2.v3 ? function () {
+          return ['Copy'];
+        } : ['Copy']), h(Button, {
+          size: 'medium',
+          attrs: _this2.v3 ? undefined : {
+            size: 'medium',
+            themeColor: 'base',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Retry',
+            svgIcon: rotateIcon,
+            "aria-hidden": "true"
+          },
+          themeColor: 'base',
+          fillMode: 'flat',
+          rounded: 'medium',
+          title: 'Retry',
+          svgIcon: rotateIcon,
+          "aria-hidden": "true",
+          onClick: function onClick() {
+            return _this.retryPrompt(output);
+          },
+          on: _this2.v3 ? undefined : {
+            "click": function onClick() {
+              return _this.retryPrompt(output);
+            }
+          }
+        }, _this2.v3 ? function () {
+          return ['Retry'];
+        } : ['Retry']), showOutputRating && h("span", {
+          "class": "k-spacer"
+        }), showOutputRating && h(Button, {
+          size: 'medium',
+          attrs: _this2.v3 ? undefined : {
+            size: 'medium',
+            themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Rate up',
+            svgIcon: thumbUpOutlineIcon,
+            "aria-hidden": "true"
+          },
+          themeColor: output.ratingType === 'positive' ? 'primary' : 'base',
+          fillMode: 'flat',
+          rounded: 'medium',
+          title: 'Rate up',
+          svgIcon: thumbUpOutlineIcon,
+          "aria-hidden": "true",
+          onClick: function onClick() {
+            return _this.outputRating(output, 'positive');
+          },
+          on: _this2.v3 ? undefined : {
+            "click": function onClick() {
+              return _this.outputRating(output, 'positive');
+            }
+          }
+        }), showOutputRating && h(Button, {
+          size: 'medium',
+          attrs: _this2.v3 ? undefined : {
+            size: 'medium',
+            themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+            fillMode: 'flat',
+            rounded: 'medium',
+            title: 'Rate down',
+            svgIcon: thumbDownOutlineIcon,
+            "aria-hidden": "true"
+          },
+          themeColor: output.ratingType === 'negative' ? 'primary' : 'base',
+          fillMode: 'flat',
+          rounded: 'medium',
+          title: 'Rate down',
+          svgIcon: thumbDownOutlineIcon,
+          "aria-hidden": "true",
+          onClick: function onClick() {
+            return _this.outputRating(output, 'negative');
+          },
+          on: _this2.v3 ? undefined : {
+            "click": function onClick() {
+              return _this.outputRating(output, 'negative');
+            }
+          }
+        })])]);
+      }, _this3) : h(Card, _this3.v3 ? function () {
+        return [h(CardBody, _this3.v3 ? function () {
+          return [ls.toLanguageString(aIPromptNoOutputs, messages[aIPromptNoOutputs])];
+        } : [ls.toLanguageString(aIPromptNoOutputs, messages[aIPromptNoOutputs])])];
+      } : [h(CardBody, _this3.v3 ? function () {
+        return [ls.toLanguageString(aIPromptNoOutputs, messages[aIPromptNoOutputs])];
+      } : [ls.toLanguageString(aIPromptNoOutputs, messages[aIPromptNoOutputs])])])])])])
+    );
+  }
+};
+/**
+ * @hidden
+ */
+var AIPromptOutputView = AIPromptOutputViewVue2;
+export { AIPromptOutputView, AIPromptOutputViewVue2 };