@symphony-talent/component-library 4.213.0 → 4.213.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/atoms/input-textarea-with-send/input-textarea-with-send.component.mjs +6 -4
- package/esm2020/lib/organisms/ai-search-assistant-drawer/ai-search-assistant-drawer.component.mjs +3 -3
- package/esm2020/lib/organisms/ai-search-assistant-drawer/ai-search-assistant-drawer.model.mjs +1 -1
- package/esm2020/projects/component-library/lib/atoms/input-textarea-with-send/input-textarea-with-send.component.mjs +6 -4
- package/esm2020/projects/component-library/lib/organisms/ai-search-assistant-drawer/ai-search-assistant-drawer.component.mjs +3 -3
- package/esm2020/projects/component-library/lib/organisms/ai-search-assistant-drawer/ai-search-assistant-drawer.model.mjs +1 -1
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs +7 -5
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2015/symphony-talent-component-library.mjs +7 -5
- package/fesm2015/symphony-talent-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs +7 -5
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library.mjs +7 -5
- package/fesm2020/symphony-talent-component-library.mjs.map +1 -1
- package/lib/atoms/input-textarea-with-send/input-textarea-with-send.component.d.ts +2 -1
- package/lib/organisms/ai-search-assistant-drawer/ai-search-assistant-drawer.model.d.ts +1 -0
- package/package.json +1 -1
- package/projects/component-library/lib/atoms/input-textarea-with-send/input-textarea-with-send.component.d.ts +2 -1
- package/projects/component-library/lib/organisms/ai-search-assistant-drawer/ai-search-assistant-drawer.model.d.ts +1 -0
|
@@ -2129,13 +2129,13 @@ class InputTextareaWithSendComponent {
|
|
|
2129
2129
|
}
|
|
2130
2130
|
}
|
|
2131
2131
|
InputTextareaWithSendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextareaWithSendComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2132
|
-
InputTextareaWithSendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextareaWithSendComponent, selector: "symphony-input-textarea-with-send", inputs: { placeholder: "placeholder", isDisabled: "isDisabled", maxCharacterLimit: "maxCharacterLimit", showCharacterCount: "showCharacterCount", minRows: "minRows", maxRows: "maxRows", sendButtonIcon: "sendButtonIcon", sendButtonAriaLabel: "sendButtonAriaLabel", autoResize: "autoResize", showStartOverButton: "showStartOverButton", startOverButtonId: "startOverButtonId", startOverDisabled: "startOverDisabled", startOverButtonIcon: "startOverButtonIcon", startOverButtonTitle: "startOverButtonTitle", undoButtonId: "undoButtonId", undoDisabled: "undoDisabled", undoButtonIcon: "undoButtonIcon", undoButtonTitle: "undoButtonTitle", redoButtonId: "redoButtonId", redoDisabled: "redoDisabled", redoButtonIcon: "redoButtonIcon", redoButtonTitle: "redoButtonTitle" }, outputs: { sendClicked: "sendClicked", enterPressed: "enterPressed", valueChanged: "valueChanged", startOverClicked: "startOverClicked", undoClicked: "undoClicked", redoClicked: "redoClicked" }, providers: [
|
|
2132
|
+
InputTextareaWithSendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextareaWithSendComponent, selector: "symphony-input-textarea-with-send", inputs: { placeholder: "placeholder", isDisabled: "isDisabled", maxCharacterLimit: "maxCharacterLimit", showCharacterCount: "showCharacterCount", minRows: "minRows", maxRows: "maxRows", sendButtonIcon: "sendButtonIcon", sendButtonAriaLabel: "sendButtonAriaLabel", autoResize: "autoResize", showStartOverButton: "showStartOverButton", showUndoRedoButtons: "showUndoRedoButtons", startOverButtonId: "startOverButtonId", startOverDisabled: "startOverDisabled", startOverButtonIcon: "startOverButtonIcon", startOverButtonTitle: "startOverButtonTitle", undoButtonId: "undoButtonId", undoDisabled: "undoDisabled", undoButtonIcon: "undoButtonIcon", undoButtonTitle: "undoButtonTitle", redoButtonId: "redoButtonId", redoDisabled: "redoDisabled", redoButtonIcon: "redoButtonIcon", redoButtonTitle: "redoButtonTitle" }, outputs: { sendClicked: "sendClicked", enterPressed: "enterPressed", valueChanged: "valueChanged", startOverClicked: "startOverClicked", undoClicked: "undoClicked", redoClicked: "redoClicked" }, providers: [
|
|
2133
2133
|
{
|
|
2134
2134
|
provide: NG_VALUE_ACCESSOR,
|
|
2135
2135
|
useExisting: forwardRef(() => InputTextareaWithSendComponent),
|
|
2136
2136
|
multi: true
|
|
2137
2137
|
}
|
|
2138
|
-
], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textareaElement"], descendants: true }], ngImport: i0, template: "<div class=\"input-textarea-with-send-container\">\n <div\n class=\"composer-meta sfx-mb-10\">\n <button class=\"ai-start-over\"\n *ngIf=\"showStartOverButton\"\n type=\"button\"\n (click)=\"onStartOverClick()\"\n [disabled]=\"startOverDisabled\"\n [id]=\"startOverButtonId\">\n <symphony-icon\n [icon]=\"startOverButtonIcon\"\n [title]=\"startOverButtonTitle\"\n [size]=\"'20px'\">\n </symphony-icon>\n </button>\n\n <button class=\"ai-undo\"\n type=\"button\"\n (click)=\"onUndoClick()\"\n [disabled]=\"undoDisabled\"\n [id]=\"undoButtonId\">\n <symphony-icon\n [icon]=\"undoButtonIcon\"\n [title]=\"undoButtonTitle\"\n [size]=\"'20px'\">\n </symphony-icon>\n </button>\n\n <button class=\"ai-redo\"\n type=\"button\"\n (click)=\"onRedoClick()\"\n [disabled]=\"redoDisabled\"\n [id]=\"redoButtonId\">\n <symphony-icon\n [icon]=\"redoButtonIcon\"\n [title]=\"redoButtonTitle\"\n [size]=\"'20px'\">\n </symphony-icon>\n </button>\n\n <div\n class=\"character-counter\"\n *ngIf=\"showCharacterCount && maxCharacterLimit\">\n <span\n class=\"counter-text\"\n [class.counter-exceeded]=\"characterLimitExceeded\">\n {{ characterCount }} / {{ maxCharacterLimit }}\n </span>\n </div>\n </div>\n\n <!-- Input with Send Button -->\n <div class=\"input-wrapper\">\n <textarea\n #textareaElement\n class=\"textarea-input\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"isDisabled\"\n [maxLength]=\"maxCharacterLimit\"\n (input)=\"onInputChange($event)\"\n (keydown)=\"onInputKeyPress($event)\"\n (blur)=\"onTouched()\"\n rows=\"1\">\n </textarea>\n \n <!-- Send Button -->\n <button\n type=\"button\"\n class=\"send-button\"\n [class.enabled]=\"canSendMessage\"\n [class.disabled]=\"!canSendMessage\"\n [disabled]=\"!canSendMessage\"\n (click)=\"onSendClick()\"\n id=\"button-textarea-send\"\n [attr.aria-label]=\"sendButtonAriaLabel\">\n <symphony-icon [icon]=\"sendButtonIcon\" [size]=\"'10px'\"></symphony-icon>\n </button>\n </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.input-textarea-with-send-container{width:100%}.composer-meta{display:flex;align-items:center;justify-content:space-between;gap:.625rem}.composer-meta .ai-start-over,.composer-meta .ai-undo,.composer-meta .ai-redo{display:flex;justify-content:flex-start;cursor:pointer;align-items:center;margin-left:0;margin-right:0;text-align:left;background:transparent;border:none;outline:none}.composer-meta .ai-start-over:disabled,.composer-meta .ai-undo:disabled,.composer-meta .ai-redo:disabled{cursor:not-allowed;background:transparent!important}.composer-meta .ai-start-over:disabled i,.composer-meta .ai-undo:disabled i,.composer-meta .ai-redo:disabled i{color:#c3cbdc}.composer-meta .ai-start-over:disabled symphony-icon,.composer-meta .ai-undo:disabled symphony-icon,.composer-meta .ai-redo:disabled symphony-icon{color:#c3cbdc}.composer-meta .ai-start-over:disabled symphony-icon:hover,.composer-meta .ai-undo:disabled symphony-icon:hover,.composer-meta .ai-redo:disabled symphony-icon:hover{color:#c3cbdc!important}.composer-meta .ai-start-over symphony-icon,.composer-meta .ai-undo symphony-icon,.composer-meta .ai-redo symphony-icon{color:#5b6d80;transition:color .2s ease;font-weight:700}.composer-meta .ai-start-over symphony-icon:hover,.composer-meta .ai-undo symphony-icon:hover,.composer-meta .ai-redo symphony-icon:hover{color:#2b8ff3}.composer-meta .ai-redo symphony-icon{transform:scaleX(-1)}.composer-meta .character-counter{text-align:right;margin-left:auto}.composer-meta .character-counter .counter-text{font-size:.75rem;color:#5b6d80}.composer-meta .character-counter .counter-text.counter-exceeded{color:#ac4463;font-weight:500}.input-wrapper{position:relative;display:flex;align-items:flex-end}.input-wrapper .textarea-input{flex:1;width:100%;min-height:52px;max-height:200px;padding:.9375rem 56px .9375rem .9375rem;font-size:.875rem;line-height:1.5rem;font-family:runda,sans-serif;background:#ffffff;border:1px solid #334860;border-radius:4px;resize:none;overflow-y:auto;transition:border-color .2s ease}.input-wrapper .textarea-input::-moz-placeholder{color:#5b6d80}.input-wrapper .textarea-input:-ms-input-placeholder{color:#5b6d80}.input-wrapper .textarea-input::placeholder{color:#5b6d80}.input-wrapper .textarea-input:focus{border-color:#2b8ff3;outline:none}.input-wrapper .textarea-input:disabled{background-color:#f1f2f5;border-color:#c3cbdc;color:#5b6d80;cursor:not-allowed}.input-wrapper .textarea-input::-webkit-scrollbar{width:4px}.input-wrapper .textarea-input::-webkit-scrollbar-track{background:transparent}.input-wrapper .textarea-input::-webkit-scrollbar-thumb{background:#C3CBDC;border-radius:2px}.input-wrapper .textarea-input::-webkit-scrollbar-thumb:hover{background:#5B6D80}.input-wrapper .send-button{position:absolute;right:.625rem;bottom:.625rem;width:36px;height:36px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:10;flex-shrink:0}.input-wrapper .send-button.enabled{background-color:#2b8ff3}.input-wrapper .send-button.enabled:hover{background-color:#0d76de;transform:scale(1.05)}.input-wrapper .send-button.enabled:active{transform:scale(.95)}.input-wrapper .send-button.enabled symphony-icon{color:#fff;font-size:16px}.input-wrapper .send-button.disabled{background-color:#d2d8e5;cursor:not-allowed}.input-wrapper .send-button.disabled symphony-icon{color:#5b6d80;font-size:16px}.input-wrapper .send-button symphony-icon{transition:color .2s ease}.input-wrapper .send-button:focus{outline:2px solid #2B8FF3;outline-offset:2px}@media (max-width: 768px){.input-wrapper .textarea-input{min-height:48px;padding:.625rem 50px .625rem .9375rem;font-size:.875rem;line-height:22px}.input-wrapper .send-button{width:32px;height:32px;right:.625rem;bottom:.625rem}.input-wrapper .send-button symphony-icon{font-size:.875rem}}@media (prefers-contrast: high){.textarea-input{border:2px solid #08203E}.textarea-input:focus{border-color:#2b8ff3}.send-button.enabled{border:2px solid #0a5cae}}@media (prefers-reduced-motion: reduce){.textarea-input,.send-button{transition:none}.send-button:hover,.send-button:active{transform:none}}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2138
|
+
], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textareaElement"], descendants: true }], ngImport: i0, template: "<div class=\"input-textarea-with-send-container\">\n <div\n class=\"composer-meta sfx-mb-10\">\n <button class=\"ai-start-over\"\n *ngIf=\"showStartOverButton\"\n type=\"button\"\n (click)=\"onStartOverClick()\"\n [disabled]=\"startOverDisabled\"\n [id]=\"startOverButtonId\">\n <symphony-icon\n [icon]=\"startOverButtonIcon\"\n [title]=\"startOverButtonTitle\"\n [size]=\"'20px'\">\n </symphony-icon>\n </button>\n\n <button class=\"ai-undo\"\n *ngIf=\"showUndoRedoButtons\"\n type=\"button\"\n (click)=\"onUndoClick()\"\n [disabled]=\"undoDisabled\"\n [id]=\"undoButtonId\">\n <symphony-icon\n [icon]=\"undoButtonIcon\"\n [title]=\"undoButtonTitle\"\n [size]=\"'20px'\">\n </symphony-icon>\n </button>\n\n <button class=\"ai-redo\"\n *ngIf=\"showUndoRedoButtons\"\n type=\"button\"\n (click)=\"onRedoClick()\"\n [disabled]=\"redoDisabled\"\n [id]=\"redoButtonId\">\n <symphony-icon\n [icon]=\"redoButtonIcon\"\n [title]=\"redoButtonTitle\"\n [size]=\"'20px'\">\n </symphony-icon>\n </button>\n\n <div\n class=\"character-counter\"\n *ngIf=\"showCharacterCount && maxCharacterLimit\">\n <span\n class=\"counter-text\"\n [class.counter-exceeded]=\"characterLimitExceeded\">\n {{ characterCount }} / {{ maxCharacterLimit }}\n </span>\n </div>\n </div>\n\n <!-- Input with Send Button -->\n <div class=\"input-wrapper\">\n <textarea\n #textareaElement\n class=\"textarea-input\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"isDisabled\"\n [maxLength]=\"maxCharacterLimit\"\n (input)=\"onInputChange($event)\"\n (keydown)=\"onInputKeyPress($event)\"\n (blur)=\"onTouched()\"\n rows=\"1\">\n </textarea>\n \n <!-- Send Button -->\n <button\n type=\"button\"\n class=\"send-button\"\n [class.enabled]=\"canSendMessage\"\n [class.disabled]=\"!canSendMessage\"\n [disabled]=\"!canSendMessage\"\n (click)=\"onSendClick()\"\n id=\"button-textarea-send\"\n [attr.aria-label]=\"sendButtonAriaLabel\">\n <symphony-icon [icon]=\"sendButtonIcon\" [size]=\"'10px'\"></symphony-icon>\n </button>\n </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.input-textarea-with-send-container{width:100%}.composer-meta{display:flex;align-items:center;justify-content:space-between;gap:.625rem}.composer-meta .ai-start-over,.composer-meta .ai-undo,.composer-meta .ai-redo{display:flex;justify-content:flex-start;cursor:pointer;align-items:center;margin-left:0;margin-right:0;text-align:left;background:transparent;border:none;outline:none}.composer-meta .ai-start-over:disabled,.composer-meta .ai-undo:disabled,.composer-meta .ai-redo:disabled{cursor:not-allowed;background:transparent!important}.composer-meta .ai-start-over:disabled i,.composer-meta .ai-undo:disabled i,.composer-meta .ai-redo:disabled i{color:#c3cbdc}.composer-meta .ai-start-over:disabled symphony-icon,.composer-meta .ai-undo:disabled symphony-icon,.composer-meta .ai-redo:disabled symphony-icon{color:#c3cbdc}.composer-meta .ai-start-over:disabled symphony-icon:hover,.composer-meta .ai-undo:disabled symphony-icon:hover,.composer-meta .ai-redo:disabled symphony-icon:hover{color:#c3cbdc!important}.composer-meta .ai-start-over symphony-icon,.composer-meta .ai-undo symphony-icon,.composer-meta .ai-redo symphony-icon{color:#5b6d80;transition:color .2s ease;font-weight:700}.composer-meta .ai-start-over symphony-icon:hover,.composer-meta .ai-undo symphony-icon:hover,.composer-meta .ai-redo symphony-icon:hover{color:#2b8ff3}.composer-meta .ai-redo symphony-icon{transform:scaleX(-1)}.composer-meta .character-counter{text-align:right;margin-left:auto}.composer-meta .character-counter .counter-text{font-size:.75rem;color:#5b6d80}.composer-meta .character-counter .counter-text.counter-exceeded{color:#ac4463;font-weight:500}.input-wrapper{position:relative;display:flex;align-items:flex-end}.input-wrapper .textarea-input{flex:1;width:100%;min-height:52px;max-height:200px;padding:.9375rem 56px .9375rem .9375rem;font-size:.875rem;line-height:1.5rem;font-family:runda,sans-serif;background:#ffffff;border:1px solid #334860;border-radius:4px;resize:none;overflow-y:auto;transition:border-color .2s ease}.input-wrapper .textarea-input::-moz-placeholder{color:#5b6d80}.input-wrapper .textarea-input:-ms-input-placeholder{color:#5b6d80}.input-wrapper .textarea-input::placeholder{color:#5b6d80}.input-wrapper .textarea-input:focus{border-color:#2b8ff3;outline:none}.input-wrapper .textarea-input:disabled{background-color:#f1f2f5;border-color:#c3cbdc;color:#5b6d80;cursor:not-allowed}.input-wrapper .textarea-input::-webkit-scrollbar{width:4px}.input-wrapper .textarea-input::-webkit-scrollbar-track{background:transparent}.input-wrapper .textarea-input::-webkit-scrollbar-thumb{background:#C3CBDC;border-radius:2px}.input-wrapper .textarea-input::-webkit-scrollbar-thumb:hover{background:#5B6D80}.input-wrapper .send-button{position:absolute;right:.625rem;bottom:.625rem;width:36px;height:36px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:10;flex-shrink:0}.input-wrapper .send-button.enabled{background-color:#2b8ff3}.input-wrapper .send-button.enabled:hover{background-color:#0d76de;transform:scale(1.05)}.input-wrapper .send-button.enabled:active{transform:scale(.95)}.input-wrapper .send-button.enabled symphony-icon{color:#fff;font-size:16px}.input-wrapper .send-button.disabled{background-color:#d2d8e5;cursor:not-allowed}.input-wrapper .send-button.disabled symphony-icon{color:#5b6d80;font-size:16px}.input-wrapper .send-button symphony-icon{transition:color .2s ease}.input-wrapper .send-button:focus{outline:2px solid #2B8FF3;outline-offset:2px}@media (max-width: 768px){.input-wrapper .textarea-input{min-height:48px;padding:.625rem 50px .625rem .9375rem;font-size:.875rem;line-height:22px}.input-wrapper .send-button{width:32px;height:32px;right:.625rem;bottom:.625rem}.input-wrapper .send-button symphony-icon{font-size:.875rem}}@media (prefers-contrast: high){.textarea-input{border:2px solid #08203E}.textarea-input:focus{border-color:#2b8ff3}.send-button.enabled{border:2px solid #0a5cae}}@media (prefers-reduced-motion: reduce){.textarea-input,.send-button{transition:none}.send-button:hover,.send-button:active{transform:none}}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2139
2139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextareaWithSendComponent, decorators: [{
|
|
2140
2140
|
type: Component,
|
|
2141
2141
|
args: [{ selector: 'symphony-input-textarea-with-send', providers: [
|
|
@@ -2144,7 +2144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2144
2144
|
useExisting: forwardRef(() => InputTextareaWithSendComponent),
|
|
2145
2145
|
multi: true
|
|
2146
2146
|
}
|
|
2147
|
-
], template: "<div class=\"input-textarea-with-send-container\">\n <div\n class=\"composer-meta sfx-mb-10\">\n <button class=\"ai-start-over\"\n *ngIf=\"showStartOverButton\"\n type=\"button\"\n (click)=\"onStartOverClick()\"\n [disabled]=\"startOverDisabled\"\n [id]=\"startOverButtonId\">\n <symphony-icon\n [icon]=\"startOverButtonIcon\"\n [title]=\"startOverButtonTitle\"\n [size]=\"'20px'\">\n </symphony-icon>\n </button>\n\n <button class=\"ai-undo\"\n type=\"button\"\n (click)=\"onUndoClick()\"\n [disabled]=\"undoDisabled\"\n [id]=\"undoButtonId\">\n <symphony-icon\n [icon]=\"undoButtonIcon\"\n [title]=\"undoButtonTitle\"\n [size]=\"'20px'\">\n </symphony-icon>\n </button>\n\n <button class=\"ai-redo\"\n type=\"button\"\n (click)=\"onRedoClick()\"\n [disabled]=\"redoDisabled\"\n [id]=\"redoButtonId\">\n <symphony-icon\n [icon]=\"redoButtonIcon\"\n [title]=\"redoButtonTitle\"\n [size]=\"'20px'\">\n </symphony-icon>\n </button>\n\n <div\n class=\"character-counter\"\n *ngIf=\"showCharacterCount && maxCharacterLimit\">\n <span\n class=\"counter-text\"\n [class.counter-exceeded]=\"characterLimitExceeded\">\n {{ characterCount }} / {{ maxCharacterLimit }}\n </span>\n </div>\n </div>\n\n <!-- Input with Send Button -->\n <div class=\"input-wrapper\">\n <textarea\n #textareaElement\n class=\"textarea-input\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"isDisabled\"\n [maxLength]=\"maxCharacterLimit\"\n (input)=\"onInputChange($event)\"\n (keydown)=\"onInputKeyPress($event)\"\n (blur)=\"onTouched()\"\n rows=\"1\">\n </textarea>\n \n <!-- Send Button -->\n <button\n type=\"button\"\n class=\"send-button\"\n [class.enabled]=\"canSendMessage\"\n [class.disabled]=\"!canSendMessage\"\n [disabled]=\"!canSendMessage\"\n (click)=\"onSendClick()\"\n id=\"button-textarea-send\"\n [attr.aria-label]=\"sendButtonAriaLabel\">\n <symphony-icon [icon]=\"sendButtonIcon\" [size]=\"'10px'\"></symphony-icon>\n </button>\n </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.input-textarea-with-send-container{width:100%}.composer-meta{display:flex;align-items:center;justify-content:space-between;gap:.625rem}.composer-meta .ai-start-over,.composer-meta .ai-undo,.composer-meta .ai-redo{display:flex;justify-content:flex-start;cursor:pointer;align-items:center;margin-left:0;margin-right:0;text-align:left;background:transparent;border:none;outline:none}.composer-meta .ai-start-over:disabled,.composer-meta .ai-undo:disabled,.composer-meta .ai-redo:disabled{cursor:not-allowed;background:transparent!important}.composer-meta .ai-start-over:disabled i,.composer-meta .ai-undo:disabled i,.composer-meta .ai-redo:disabled i{color:#c3cbdc}.composer-meta .ai-start-over:disabled symphony-icon,.composer-meta .ai-undo:disabled symphony-icon,.composer-meta .ai-redo:disabled symphony-icon{color:#c3cbdc}.composer-meta .ai-start-over:disabled symphony-icon:hover,.composer-meta .ai-undo:disabled symphony-icon:hover,.composer-meta .ai-redo:disabled symphony-icon:hover{color:#c3cbdc!important}.composer-meta .ai-start-over symphony-icon,.composer-meta .ai-undo symphony-icon,.composer-meta .ai-redo symphony-icon{color:#5b6d80;transition:color .2s ease;font-weight:700}.composer-meta .ai-start-over symphony-icon:hover,.composer-meta .ai-undo symphony-icon:hover,.composer-meta .ai-redo symphony-icon:hover{color:#2b8ff3}.composer-meta .ai-redo symphony-icon{transform:scaleX(-1)}.composer-meta .character-counter{text-align:right;margin-left:auto}.composer-meta .character-counter .counter-text{font-size:.75rem;color:#5b6d80}.composer-meta .character-counter .counter-text.counter-exceeded{color:#ac4463;font-weight:500}.input-wrapper{position:relative;display:flex;align-items:flex-end}.input-wrapper .textarea-input{flex:1;width:100%;min-height:52px;max-height:200px;padding:.9375rem 56px .9375rem .9375rem;font-size:.875rem;line-height:1.5rem;font-family:runda,sans-serif;background:#ffffff;border:1px solid #334860;border-radius:4px;resize:none;overflow-y:auto;transition:border-color .2s ease}.input-wrapper .textarea-input::-moz-placeholder{color:#5b6d80}.input-wrapper .textarea-input:-ms-input-placeholder{color:#5b6d80}.input-wrapper .textarea-input::placeholder{color:#5b6d80}.input-wrapper .textarea-input:focus{border-color:#2b8ff3;outline:none}.input-wrapper .textarea-input:disabled{background-color:#f1f2f5;border-color:#c3cbdc;color:#5b6d80;cursor:not-allowed}.input-wrapper .textarea-input::-webkit-scrollbar{width:4px}.input-wrapper .textarea-input::-webkit-scrollbar-track{background:transparent}.input-wrapper .textarea-input::-webkit-scrollbar-thumb{background:#C3CBDC;border-radius:2px}.input-wrapper .textarea-input::-webkit-scrollbar-thumb:hover{background:#5B6D80}.input-wrapper .send-button{position:absolute;right:.625rem;bottom:.625rem;width:36px;height:36px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:10;flex-shrink:0}.input-wrapper .send-button.enabled{background-color:#2b8ff3}.input-wrapper .send-button.enabled:hover{background-color:#0d76de;transform:scale(1.05)}.input-wrapper .send-button.enabled:active{transform:scale(.95)}.input-wrapper .send-button.enabled symphony-icon{color:#fff;font-size:16px}.input-wrapper .send-button.disabled{background-color:#d2d8e5;cursor:not-allowed}.input-wrapper .send-button.disabled symphony-icon{color:#5b6d80;font-size:16px}.input-wrapper .send-button symphony-icon{transition:color .2s ease}.input-wrapper .send-button:focus{outline:2px solid #2B8FF3;outline-offset:2px}@media (max-width: 768px){.input-wrapper .textarea-input{min-height:48px;padding:.625rem 50px .625rem .9375rem;font-size:.875rem;line-height:22px}.input-wrapper .send-button{width:32px;height:32px;right:.625rem;bottom:.625rem}.input-wrapper .send-button symphony-icon{font-size:.875rem}}@media (prefers-contrast: high){.textarea-input{border:2px solid #08203E}.textarea-input:focus{border-color:#2b8ff3}.send-button.enabled{border:2px solid #0a5cae}}@media (prefers-reduced-motion: reduce){.textarea-input,.send-button{transition:none}.send-button:hover,.send-button:active{transform:none}}\n"] }]
|
|
2147
|
+
], template: "<div class=\"input-textarea-with-send-container\">\n <div\n class=\"composer-meta sfx-mb-10\">\n <button class=\"ai-start-over\"\n *ngIf=\"showStartOverButton\"\n type=\"button\"\n (click)=\"onStartOverClick()\"\n [disabled]=\"startOverDisabled\"\n [id]=\"startOverButtonId\">\n <symphony-icon\n [icon]=\"startOverButtonIcon\"\n [title]=\"startOverButtonTitle\"\n [size]=\"'20px'\">\n </symphony-icon>\n </button>\n\n <button class=\"ai-undo\"\n *ngIf=\"showUndoRedoButtons\"\n type=\"button\"\n (click)=\"onUndoClick()\"\n [disabled]=\"undoDisabled\"\n [id]=\"undoButtonId\">\n <symphony-icon\n [icon]=\"undoButtonIcon\"\n [title]=\"undoButtonTitle\"\n [size]=\"'20px'\">\n </symphony-icon>\n </button>\n\n <button class=\"ai-redo\"\n *ngIf=\"showUndoRedoButtons\"\n type=\"button\"\n (click)=\"onRedoClick()\"\n [disabled]=\"redoDisabled\"\n [id]=\"redoButtonId\">\n <symphony-icon\n [icon]=\"redoButtonIcon\"\n [title]=\"redoButtonTitle\"\n [size]=\"'20px'\">\n </symphony-icon>\n </button>\n\n <div\n class=\"character-counter\"\n *ngIf=\"showCharacterCount && maxCharacterLimit\">\n <span\n class=\"counter-text\"\n [class.counter-exceeded]=\"characterLimitExceeded\">\n {{ characterCount }} / {{ maxCharacterLimit }}\n </span>\n </div>\n </div>\n\n <!-- Input with Send Button -->\n <div class=\"input-wrapper\">\n <textarea\n #textareaElement\n class=\"textarea-input\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"isDisabled\"\n [maxLength]=\"maxCharacterLimit\"\n (input)=\"onInputChange($event)\"\n (keydown)=\"onInputKeyPress($event)\"\n (blur)=\"onTouched()\"\n rows=\"1\">\n </textarea>\n \n <!-- Send Button -->\n <button\n type=\"button\"\n class=\"send-button\"\n [class.enabled]=\"canSendMessage\"\n [class.disabled]=\"!canSendMessage\"\n [disabled]=\"!canSendMessage\"\n (click)=\"onSendClick()\"\n id=\"button-textarea-send\"\n [attr.aria-label]=\"sendButtonAriaLabel\">\n <symphony-icon [icon]=\"sendButtonIcon\" [size]=\"'10px'\"></symphony-icon>\n </button>\n </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.input-textarea-with-send-container{width:100%}.composer-meta{display:flex;align-items:center;justify-content:space-between;gap:.625rem}.composer-meta .ai-start-over,.composer-meta .ai-undo,.composer-meta .ai-redo{display:flex;justify-content:flex-start;cursor:pointer;align-items:center;margin-left:0;margin-right:0;text-align:left;background:transparent;border:none;outline:none}.composer-meta .ai-start-over:disabled,.composer-meta .ai-undo:disabled,.composer-meta .ai-redo:disabled{cursor:not-allowed;background:transparent!important}.composer-meta .ai-start-over:disabled i,.composer-meta .ai-undo:disabled i,.composer-meta .ai-redo:disabled i{color:#c3cbdc}.composer-meta .ai-start-over:disabled symphony-icon,.composer-meta .ai-undo:disabled symphony-icon,.composer-meta .ai-redo:disabled symphony-icon{color:#c3cbdc}.composer-meta .ai-start-over:disabled symphony-icon:hover,.composer-meta .ai-undo:disabled symphony-icon:hover,.composer-meta .ai-redo:disabled symphony-icon:hover{color:#c3cbdc!important}.composer-meta .ai-start-over symphony-icon,.composer-meta .ai-undo symphony-icon,.composer-meta .ai-redo symphony-icon{color:#5b6d80;transition:color .2s ease;font-weight:700}.composer-meta .ai-start-over symphony-icon:hover,.composer-meta .ai-undo symphony-icon:hover,.composer-meta .ai-redo symphony-icon:hover{color:#2b8ff3}.composer-meta .ai-redo symphony-icon{transform:scaleX(-1)}.composer-meta .character-counter{text-align:right;margin-left:auto}.composer-meta .character-counter .counter-text{font-size:.75rem;color:#5b6d80}.composer-meta .character-counter .counter-text.counter-exceeded{color:#ac4463;font-weight:500}.input-wrapper{position:relative;display:flex;align-items:flex-end}.input-wrapper .textarea-input{flex:1;width:100%;min-height:52px;max-height:200px;padding:.9375rem 56px .9375rem .9375rem;font-size:.875rem;line-height:1.5rem;font-family:runda,sans-serif;background:#ffffff;border:1px solid #334860;border-radius:4px;resize:none;overflow-y:auto;transition:border-color .2s ease}.input-wrapper .textarea-input::-moz-placeholder{color:#5b6d80}.input-wrapper .textarea-input:-ms-input-placeholder{color:#5b6d80}.input-wrapper .textarea-input::placeholder{color:#5b6d80}.input-wrapper .textarea-input:focus{border-color:#2b8ff3;outline:none}.input-wrapper .textarea-input:disabled{background-color:#f1f2f5;border-color:#c3cbdc;color:#5b6d80;cursor:not-allowed}.input-wrapper .textarea-input::-webkit-scrollbar{width:4px}.input-wrapper .textarea-input::-webkit-scrollbar-track{background:transparent}.input-wrapper .textarea-input::-webkit-scrollbar-thumb{background:#C3CBDC;border-radius:2px}.input-wrapper .textarea-input::-webkit-scrollbar-thumb:hover{background:#5B6D80}.input-wrapper .send-button{position:absolute;right:.625rem;bottom:.625rem;width:36px;height:36px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:10;flex-shrink:0}.input-wrapper .send-button.enabled{background-color:#2b8ff3}.input-wrapper .send-button.enabled:hover{background-color:#0d76de;transform:scale(1.05)}.input-wrapper .send-button.enabled:active{transform:scale(.95)}.input-wrapper .send-button.enabled symphony-icon{color:#fff;font-size:16px}.input-wrapper .send-button.disabled{background-color:#d2d8e5;cursor:not-allowed}.input-wrapper .send-button.disabled symphony-icon{color:#5b6d80;font-size:16px}.input-wrapper .send-button symphony-icon{transition:color .2s ease}.input-wrapper .send-button:focus{outline:2px solid #2B8FF3;outline-offset:2px}@media (max-width: 768px){.input-wrapper .textarea-input{min-height:48px;padding:.625rem 50px .625rem .9375rem;font-size:.875rem;line-height:22px}.input-wrapper .send-button{width:32px;height:32px;right:.625rem;bottom:.625rem}.input-wrapper .send-button symphony-icon{font-size:.875rem}}@media (prefers-contrast: high){.textarea-input{border:2px solid #08203E}.textarea-input:focus{border-color:#2b8ff3}.send-button.enabled{border:2px solid #0a5cae}}@media (prefers-reduced-motion: reduce){.textarea-input,.send-button{transition:none}.send-button:hover,.send-button:active{transform:none}}\n"] }]
|
|
2148
2148
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { placeholder: [{
|
|
2149
2149
|
type: Input
|
|
2150
2150
|
}], isDisabled: [{
|
|
@@ -2165,6 +2165,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2165
2165
|
type: Input
|
|
2166
2166
|
}], showStartOverButton: [{
|
|
2167
2167
|
type: Input
|
|
2168
|
+
}], showUndoRedoButtons: [{
|
|
2169
|
+
type: Input
|
|
2168
2170
|
}], startOverButtonId: [{
|
|
2169
2171
|
type: Input
|
|
2170
2172
|
}], startOverDisabled: [{
|
|
@@ -7911,10 +7913,10 @@ class AISearchAssistantDrawerComponent {
|
|
|
7911
7913
|
}
|
|
7912
7914
|
}
|
|
7913
7915
|
AISearchAssistantDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AISearchAssistantDrawerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7914
|
-
AISearchAssistantDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AISearchAssistantDrawerComponent, selector: "symphony-ai-search-assistant-drawer", inputs: { model: "model", config: "config", contextId: "contextId" }, outputs: { startOverClicked: "startOverClicked", undoClicked: "undoClicked", redoClicked: "redoClicked", drawerClosed: "drawerClosed", promptSelected: "promptSelected", messageSent: "messageSent", inputChanged: "inputChanged", retryClicked: "retryClicked", taskCancelled: "taskCancelled", suggestionsToggled: "suggestionsToggled" }, viewQueries: [{ propertyName: "chatContainer", first: true, predicate: ["chatContainer"], descendants: true }, { propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<!-- Drawer Container -->\n<div \n class=\"ai-drawer-container\" \n [class.open]=\"model.isOpen\"\n [id]=\"getPendoId('aiAssistantDrawer')\">\n \n <!-- Edge Toggle Button (inside drawer container) -->\n <button \n class=\"ai-drawer-edge-toggle\"\n [class.drawer-open]=\"model.isOpen\"\n (click)=\"onToggleDrawer()\"\n [attr.aria-label]=\"model.isOpen ? 'Close Tala Assistant' : 'Open Tala Assistant'\"\n [title]=\"model.isOpen ? 'Close Tala Assistant' : 'Tala Assisted Messaging'\"\n [id]=\"getPendoId('aiAssistantToggle')\">\n <symphony-icon [icon]=\"model.isOpen ? 'si-arrow-next' : 'si-arrow-prev'\"></symphony-icon>\n </button>\n \n <!-- Header -->\n <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n <div class=\"ai-drawer-title sfx-m-0\">\n Build your email with \n <span class=\"ai-drawer-title-highlight\">Tala</span>, Symphony Talent's AI-powered Talent Acquisition Assistant.\n </div>\n </div>\n </div>\n\n <!-- Chat Container -->\n <div class=\"ai-drawer-body\" *ngIf=\"model.isOpen\">\n \n <!-- Messages Area -->\n <div \n class=\"ai-chat-container\" \n #chatContainer>\n \n <!-- Message List -->\n <div class=\"ai-message-list sfx-mb-20\">\n <div \n *ngFor=\"let message of model.messages; trackBy: trackByMessageId\"\n class=\"ai-message-wrapper\"\n [attr.data-message-type]=\"message.type\">\n \n <!-- Timestamp Above Message -->\n <div \n class=\"ai-message-timestamp-container\"\n *ngIf=\"config.showTimestamps\">\n <span class=\"ai-message-timestamp\">\n {{ getMessageTime(message.timestamp) }}\n </span>\n </div>\n \n <!-- Message Bubble -->\n <div \n class=\"ai-message-bubble\"\n [class.user-message]=\"message.type === 'user'\"\n [class.ai-message]=\"message.type === 'ai'\"\n [class.system-message]=\"message.type === 'system'\">\n \n <!-- AI Message Icon -->\n <div \n class=\"ai-message-icon\" \n *ngIf=\"message.type === 'ai'\">\n <symphony-icon [icon]=\"'si-ai-withoutBorder'\"></symphony-icon>\n </div>\n \n <div class=\"ai-message-content-wrapper\">\n <symphony-paragraph \n class=\"ai-message-content sfx-m-0\"\n [innerHTML]=\"message.content | newLineToBr\">\n </symphony-paragraph>\n </div>\n </div>\n \n <!-- Message Status (for user messages) -->\n <div \n class=\"ai-message-status\"\n *ngIf=\"message.type === 'user' && message.status\">\n <span \n class=\"ai-status-text\"\n [class.status-delivered]=\"message.status === 'delivered'\"\n [class.status-pending]=\"message.status === 'pending'\"\n [class.status-error]=\"message.status === 'error'\">\n {{ getStatusText(message.status) }}\n </span>\n </div>\n </div>\n\n <!-- AI Task Status (Progress Bar and Error Handling) -->\n\n <div \n *ngIf=\"model.aiTaskStatus\"\n class=\"ai-message-wrapper task-status-wrapper\"\n id=\"taskStatusMessage\">\n <symphony-task-status\n [taskStatusModel]=\"model.aiTaskStatus\"\n (cancelTask)=\"onCancelTask()\"\n (retryTask)=\"onRetryTask()\"\n [id]=\"getPendoId('aiTaskStatus')\">\n </symphony-task-status>\n </div>\n </div>\n </div>\n\n <!-- Suggested Prompts Section -->\n <div \n class=\"ai-suggested-prompts-section\"\n *ngIf=\"config.enableSuggestedPrompts && model.suggestedPrompts.length > 0\">\n <div class=\"ai-prompts-intro-row\">\n <symphony-paragraph class=\"ai-prompts-intro sfx-mb-15\">\n {{ model.isSuggestionsOpen ? 'Here are a few suggested prompts to get you started.' : 'Need help getting started?' }}\n </symphony-paragraph>\n <button\n class=\"ai-suggestions-toggle-compact\"\n [class.suggestions-open]=\"model.isSuggestionsOpen\"\n (click)=\"onToggleSuggestions()\"\n [attr.aria-label]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n [title]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n [id]=\"getPendoId('aiSuggestionsToggle')\"\n [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n <symphony-icon [icon]=\"'si-arrow-hide-reveal'\"></symphony-icon>\n </button>\n </div>\n <div \n class=\"ai-suggested-prompts\" \n *ngIf=\"model.isSuggestionsOpen\"\n [class.open]=\"model.isSuggestionsOpen\"\n [id]=\"getPendoId('aiSuggestedPrompts')\"\n [class.disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n <div class=\"ai-prompts-list\">\n <button\n *ngFor=\"let prompt of model.suggestedPrompts; let i = index\"\n class=\"ai-prompt-button\"\n (click)=\"onPromptClick(prompt)\"\n [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n [id]=\"getPendoId('aiPromptButton-' + i)\">\n <symphony-icon \n *ngIf=\"prompt.icon\" \n [icon]=\"'si-' + prompt.icon\"\n class=\"ai-prompt-icon\">\n </symphony-icon>\n <span class=\"ai-prompt-text\">{{ prompt.text }}</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Footer / Input Area -->\n <div class=\"ai-drawer-footer\" *ngIf=\"model.isOpen\">\n \n <!-- Input Row -->\n <div class=\"ai-input-row\">\n <symphony-input-textarea-with-send\n #messageInput\n [(ngModel)]=\"model.inputValue\"\n [placeholder]=\"config.placeholder\"\n [isDisabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n [maxCharacterLimit]=\"model.maxCharacterLimit\"\n [showCharacterCount]=\"!!model.maxCharacterLimit\"\n (sendClicked)=\"onSendMessage()\"\n (valueChanged)=\"onInputChange($event)\"\n (enterPressed)=\"onSendMessage()\"\n [id]=\"getPendoId('aiMessageInput')\"\n [showStartOverButton]=\"config.showStartOverButton\"\n [startOverDisabled]=\"false\"\n [startOverButtonId]=\"getPendoId('aiStartOverButton')\"\n [startOverButtonTitle]=\"'Start Again'\"\n (startOverClicked)=\"onStartOverClick()\"\n [undoDisabled]=\"config.undoDisabled\"\n [undoButtonId]=\"getPendoId('aiUndoButton')\"\n [undoButtonTitle]=\"'Undo'\"\n (undoClicked)=\"onUndoClick()\"\n [redoDisabled]=\"config.redoDisabled\"\n [redoButtonId]=\"getPendoId('aiRedoButton')\"\n [redoButtonTitle]=\"'Redo'\"\n (redoClicked)=\"onRedoClick()\">\n </symphony-input-textarea-with-send>\n </div>\n </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.ai-drawer-container{position:absolute;top:0;right:0;width:100%;max-width:500px;height:100%;background-color:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.15);z-index:9999;display:flex;flex-direction:column;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ai-drawer-container.open{transform:translate(0)}@media (max-width: 768px){.ai-drawer-container{width:100%;box-shadow:none}}.ai-drawer-edge-toggle{position:absolute;top:50%;left:-48px;transform:translateY(-50%);width:48px;height:48px;border:1px solid #D2D8E5;border-radius:8px 0 0 8px;background-color:#2b8ff3;color:#fff;cursor:pointer;box-shadow:-2px 0 8px rgba(0,0,0,.15);z-index:10001;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.ai-drawer-edge-toggle:hover{background-color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.2);transform:translateY(-50%) scale(1.02)}.ai-drawer-edge-toggle:focus{outline:2px solid #2B8FF3;outline-offset:2px}.ai-drawer-edge-toggle symphony-icon{font-size:20px;transition:transform .2s ease;display:block;line-height:1;color:#fff}.ai-drawer-edge-toggle.drawer-open{left:-35px;background-color:#fff;color:#2b8ff3;border-color:#d2d8e5;border-radius:8px 0 0 8px;box-shadow:-2px 0 8px rgba(0,0,0,.1)}.ai-drawer-edge-toggle.drawer-open:hover{background-color:#f1f2f5;color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.15);transform:translateY(-50%) scale(1.02)}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:18px;color:#2b8ff3}@media (max-width: 768px){.ai-drawer-edge-toggle{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle symphony-icon{font-size:18px}.ai-drawer-edge-toggle.drawer-open{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:16px}}.ai-drawer-header{display:flex;align-items:center;justify-content:center;padding:.625rem .9375rem;border-bottom:1px solid #D2D8E5;background-color:#c5aeff;position:relative;z-index:1}.ai-drawer-header .ai-drawer-title{font-size:18px;color:#000;text-align:center}.ai-drawer-header .ai-drawer-title-highlight{font-weight:700}.ai-drawer-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.ai-chat-container{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:.9375rem 1.5625rem}.ai-chat-container::-webkit-scrollbar{width:6px}.ai-chat-container::-webkit-scrollbar-track{background:#F1F2F5}.ai-chat-container::-webkit-scrollbar-thumb{background:#C3CBDC;border-radius:3px}.ai-chat-container::-webkit-scrollbar-thumb:hover{background:#5B6D80}.ai-message-list{display:flex;flex-direction:column;gap:.9375rem}.ai-message-wrapper{display:flex;flex-direction:column}.ai-message-wrapper[data-message-type=user]{align-items:flex-end}.ai-message-wrapper[data-message-type=ai],.ai-message-wrapper[data-message-type=system],.ai-message-wrapper.ai-loading-message{align-items:flex-start}.ai-message-timestamp-container{margin-bottom:.625rem;text-align:center;width:100%;align-self:center}.ai-message-timestamp-container .ai-message-timestamp{font-size:.75rem;color:#82919f;font-weight:500}.ai-message-bubble{max-width:80%;border-radius:12px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;animation:messageSlideIn .3s ease-out;display:flex;gap:.625rem}.ai-message-bubble.user-message{background-color:#2b8ff3;color:#fff;border-bottom-right-radius:4px;padding:.625rem .9375rem;justify-content:flex-end}.ai-message-bubble.user-message .ai-message-content-wrapper{display:flex;flex-direction:column;align-items:flex-end}.ai-message-bubble.ai-message{background-color:#fff;border:1px solid #D2D8E5;color:#08203e;border-bottom-left-radius:4px;padding:.625rem .9375rem;align-items:flex-start}.ai-message-bubble.ai-message .ai-message-icon{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;margin-top:2px;background:linear-gradient(90deg,#a21aff,#351cc1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.ai-message-bubble.ai-message .ai-message-icon symphony-icon{font-size:.875rem}.ai-message-bubble.ai-message .ai-message-content-wrapper{flex:1;display:flex;flex-direction:column}.ai-message-bubble.system-message{background-color:#f1f2f5;border:1px solid #E4E7EF;color:#5b6d80;border-radius:8px;text-align:center;max-width:90%;padding:.625rem .9375rem;justify-content:center}.ai-message-bubble.system-message .ai-message-content{font-size:.875rem}@media (max-width: 768px){.ai-message-bubble{max-width:90%}}.ai-message-status{margin-top:.3rem;text-align:right}.ai-message-status .ai-status-text{display:inline-flex;gap:4px;font-size:.75rem;font-weight:500}.ai-message-status .ai-status-text.status-delivered{color:#5b6d80}.ai-message-status .ai-status-text.status-delivered .ai-status-icon{color:#2cb45f;font-size:12px}.ai-message-status .ai-status-text.status-pending{color:#5b6d80}.ai-message-status .ai-status-text.status-pending .ai-status-loader{width:12px;height:12px}.ai-message-status .ai-status-text.status-error{color:#ac4463}.ai-message-status .ai-status-text.status-error .ai-status-icon{color:#ac4463;font-size:12px}.ai-loading-message .ai-message-bubble .ai-message-icon{flex:0 0 auto;width:24px;height:24px;background-color:#f0f8ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:2px}.ai-loading-message .ai-message-bubble .ai-message-icon symphony-icon{color:#2b8ff3;font-size:.875rem}.ai-loading-message .ai-message-bubble .ai-loading-content{display:flex;align-items:center;gap:.625rem;flex:1}.ai-loading-message .ai-message-bubble .ai-loading-text{font-style:italic;color:#5b6d80;font-size:.875rem}.ai-suggested-prompts-section{border-top:1px solid #E4E7EF;background-color:#f1f2f5;margin-bottom:0;position:relative;min-height:48px}.ai-prompts-intro-row{position:relative;padding:12px 14px 0;display:flex;align-items:center}.ai-prompts-intro-row .ai-prompts-intro{margin:0 auto;padding:0;font-size:.875rem;color:#5b6d80;line-height:1.4;text-align:center;position:relative;max-width:calc(100% - 60px);display:block}.ai-prompts-intro-row .ai-suggestions-toggle-compact{right:8px;width:28px;height:28px;border-radius:50%;border:none;background:#fff;color:#712ace;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s;box-shadow:0 1px 4px rgba(80,0,120,.04);font-size:15px;padding:0;margin:0}.ai-prompts-intro-row .ai-suggestions-toggle-compact:hover:not(:disabled){background:#f3f0ff;color:#5a21a4}.ai-prompts-intro-row .ai-suggestions-toggle-compact:focus{outline:2px solid #814DFF;outline-offset:2px}.ai-prompts-intro-row .ai-suggestions-toggle-compact:disabled{opacity:.5;cursor:not-allowed}.ai-prompts-intro-row .ai-suggestions-toggle-compact symphony-icon{font-size:15px;transition:transform .2s;transform:rotate(0)}.ai-prompts-intro-row .ai-suggestions-toggle-compact.suggestions-open symphony-icon{transform:rotate(180deg)}.ai-suggested-prompts{position:static;max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1);opacity:0;padding:1.25rem 1.5625rem;background-color:#f1f2f5}.ai-suggested-prompts.open{max-height:500px;opacity:1}.ai-suggested-prompts.disabled{opacity:.7;pointer-events:none}.ai-suggested-prompts .ai-prompt-button:disabled{cursor:not-allowed;opacity:.7}.ai-suggested-prompts .ai-prompts-intro{font-size:.875rem;color:#5b6d80;text-align:center;line-height:1.4}.ai-suggested-prompts .ai-prompts-list{display:flex;flex-direction:column;gap:.625rem}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button{display:flex;align-items:center;gap:.625rem;padding:.625rem .9375rem;border:1px solid #C5AEFF;border-radius:24px;background-color:transparent;color:#712ace;cursor:pointer;transition:all .2s ease;text-align:left;font-size:.875rem;min-height:48px}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:hover{background-color:#f3f0ff;border-color:#9d79ff;transform:translateY(-1px)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:active{transform:translateY(0)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-icon{flex:0 0 auto;color:#712ace;font-size:16px;display:flex}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-text{flex:1;font-weight:400;line-height:1.3}.ai-drawer-footer{padding:.9375rem 1.5625rem 1.25rem;border-top:1px solid #D2D8E5;background-color:#fff;position:relative;z-index:1}.ai-suggested-prompts-section+.ai-drawer-footer{padding-top:.3rem;padding-bottom:.9375rem}.ai-input-row symphony-input-textarea-with-send{width:100%}.ai-footer-actions{text-align:center}.ai-footer-actions symphony-button-v2{font-size:.75rem;color:#5b6d80}.ai-footer-actions symphony-button-v2:hover{color:#08203e}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.ai-drawer-container{border:2px solid #08203E}.ai-message-bubble.user-message{border:1px solid #0a5cae}.ai-message-bubble.ai-message{border:2px solid #5B6D80}.ai-message-bubble.system-message{border:2px solid #C3CBDC}}@media (prefers-reduced-motion: reduce){.ai-drawer-container,.ai-message-bubble,.ai-drawer-edge-toggle{transition:none;animation:none}}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: TaskStatusComponent, selector: "symphony-task-status", inputs: ["taskStatusModel"], outputs: ["cancelTask", "retryTask"] }, { type: InputTextareaWithSendComponent, selector: "symphony-input-textarea-with-send", inputs: ["placeholder", "isDisabled", "maxCharacterLimit", "showCharacterCount", "minRows", "maxRows", "sendButtonIcon", "sendButtonAriaLabel", "autoResize", "showStartOverButton", "startOverButtonId", "startOverDisabled", "startOverButtonIcon", "startOverButtonTitle", "undoButtonId", "undoDisabled", "undoButtonIcon", "undoButtonTitle", "redoButtonId", "redoDisabled", "redoButtonIcon", "redoButtonTitle"], outputs: ["sendClicked", "enterPressed", "valueChanged", "startOverClicked", "undoClicked", "redoClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "newLineToBr": NewLineToBrPipe } });
|
|
7916
|
+
AISearchAssistantDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AISearchAssistantDrawerComponent, selector: "symphony-ai-search-assistant-drawer", inputs: { model: "model", config: "config", contextId: "contextId" }, outputs: { startOverClicked: "startOverClicked", undoClicked: "undoClicked", redoClicked: "redoClicked", drawerClosed: "drawerClosed", promptSelected: "promptSelected", messageSent: "messageSent", inputChanged: "inputChanged", retryClicked: "retryClicked", taskCancelled: "taskCancelled", suggestionsToggled: "suggestionsToggled" }, viewQueries: [{ propertyName: "chatContainer", first: true, predicate: ["chatContainer"], descendants: true }, { propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<!-- Drawer Container -->\n<div \n class=\"ai-drawer-container\" \n [class.open]=\"model.isOpen\"\n [id]=\"getPendoId('aiAssistantDrawer')\">\n \n <!-- Edge Toggle Button (inside drawer container) -->\n <button \n class=\"ai-drawer-edge-toggle\"\n [class.drawer-open]=\"model.isOpen\"\n (click)=\"onToggleDrawer()\"\n [attr.aria-label]=\"model.isOpen ? 'Close Tala Assistant' : 'Open Tala Assistant'\"\n [title]=\"model.isOpen ? 'Close Tala Assistant' : 'Tala Assisted Messaging'\"\n [id]=\"getPendoId('aiAssistantToggle')\">\n <symphony-icon [icon]=\"model.isOpen ? 'si-arrow-next' : 'si-arrow-prev'\"></symphony-icon>\n </button>\n \n <!-- Header -->\n <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n <div class=\"ai-drawer-title sfx-m-0\">\n Build your email with \n <span class=\"ai-drawer-title-highlight\">Tala</span>, Symphony Talent's AI-powered Talent Acquisition Assistant.\n </div>\n </div>\n </div>\n\n <!-- Chat Container -->\n <div class=\"ai-drawer-body\" *ngIf=\"model.isOpen\">\n \n <!-- Messages Area -->\n <div \n class=\"ai-chat-container\" \n #chatContainer>\n \n <!-- Message List -->\n <div class=\"ai-message-list sfx-mb-20\">\n <div \n *ngFor=\"let message of model.messages; trackBy: trackByMessageId\"\n class=\"ai-message-wrapper\"\n [attr.data-message-type]=\"message.type\">\n \n <!-- Timestamp Above Message -->\n <div \n class=\"ai-message-timestamp-container\"\n *ngIf=\"config.showTimestamps\">\n <span class=\"ai-message-timestamp\">\n {{ getMessageTime(message.timestamp) }}\n </span>\n </div>\n \n <!-- Message Bubble -->\n <div \n class=\"ai-message-bubble\"\n [class.user-message]=\"message.type === 'user'\"\n [class.ai-message]=\"message.type === 'ai'\"\n [class.system-message]=\"message.type === 'system'\">\n \n <!-- AI Message Icon -->\n <div \n class=\"ai-message-icon\" \n *ngIf=\"message.type === 'ai'\">\n <symphony-icon [icon]=\"'si-ai-withoutBorder'\"></symphony-icon>\n </div>\n \n <div class=\"ai-message-content-wrapper\">\n <symphony-paragraph \n class=\"ai-message-content sfx-m-0\"\n [innerHTML]=\"message.content | newLineToBr\">\n </symphony-paragraph>\n </div>\n </div>\n \n <!-- Message Status (for user messages) -->\n <div \n class=\"ai-message-status\"\n *ngIf=\"message.type === 'user' && message.status\">\n <span \n class=\"ai-status-text\"\n [class.status-delivered]=\"message.status === 'delivered'\"\n [class.status-pending]=\"message.status === 'pending'\"\n [class.status-error]=\"message.status === 'error'\">\n {{ getStatusText(message.status) }}\n </span>\n </div>\n </div>\n\n <!-- AI Task Status (Progress Bar and Error Handling) -->\n\n <div \n *ngIf=\"model.aiTaskStatus\"\n class=\"ai-message-wrapper task-status-wrapper\"\n id=\"taskStatusMessage\">\n <symphony-task-status\n [taskStatusModel]=\"model.aiTaskStatus\"\n (cancelTask)=\"onCancelTask()\"\n (retryTask)=\"onRetryTask()\"\n [id]=\"getPendoId('aiTaskStatus')\">\n </symphony-task-status>\n </div>\n </div>\n </div>\n\n <!-- Suggested Prompts Section -->\n <div \n class=\"ai-suggested-prompts-section\"\n *ngIf=\"config.enableSuggestedPrompts && model.suggestedPrompts.length > 0\">\n <div class=\"ai-prompts-intro-row\">\n <symphony-paragraph class=\"ai-prompts-intro sfx-mb-15\">\n {{ model.isSuggestionsOpen ? 'Here are a few suggested prompts to get you started.' : 'Need help getting started?' }}\n </symphony-paragraph>\n <button\n class=\"ai-suggestions-toggle-compact\"\n [class.suggestions-open]=\"model.isSuggestionsOpen\"\n (click)=\"onToggleSuggestions()\"\n [attr.aria-label]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n [title]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n [id]=\"getPendoId('aiSuggestionsToggle')\"\n [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n <symphony-icon [icon]=\"'si-arrow-hide-reveal'\"></symphony-icon>\n </button>\n </div>\n <div \n class=\"ai-suggested-prompts\" \n *ngIf=\"model.isSuggestionsOpen\"\n [class.open]=\"model.isSuggestionsOpen\"\n [id]=\"getPendoId('aiSuggestedPrompts')\"\n [class.disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n <div class=\"ai-prompts-list\">\n <button\n *ngFor=\"let prompt of model.suggestedPrompts; let i = index\"\n class=\"ai-prompt-button\"\n (click)=\"onPromptClick(prompt)\"\n [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n [id]=\"getPendoId('aiPromptButton-' + i)\">\n <symphony-icon \n *ngIf=\"prompt.icon\" \n [icon]=\"'si-' + prompt.icon\"\n class=\"ai-prompt-icon\">\n </symphony-icon>\n <span class=\"ai-prompt-text\">{{ prompt.text }}</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Footer / Input Area -->\n <div class=\"ai-drawer-footer\" *ngIf=\"model.isOpen\">\n \n <!-- Input Row -->\n <div class=\"ai-input-row\">\n <symphony-input-textarea-with-send\n #messageInput\n [(ngModel)]=\"model.inputValue\"\n [placeholder]=\"config.placeholder\"\n [isDisabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n [maxCharacterLimit]=\"model.maxCharacterLimit\"\n [showCharacterCount]=\"!!model.maxCharacterLimit\"\n (sendClicked)=\"onSendMessage()\"\n (valueChanged)=\"onInputChange($event)\"\n (enterPressed)=\"onSendMessage()\"\n [id]=\"getPendoId('aiMessageInput')\"\n [showStartOverButton]=\"config.showStartOverButton\"\n [startOverDisabled]=\"false\"\n [startOverButtonId]=\"getPendoId('aiStartOverButton')\"\n [startOverButtonTitle]=\"'Start Again'\"\n (startOverClicked)=\"onStartOverClick()\"\n [showUndoRedoButtons]=\"config.showUndoRedoButtons\"\n [undoDisabled]=\"config.undoDisabled\"\n [undoButtonId]=\"getPendoId('aiUndoButton')\"\n [undoButtonTitle]=\"'Undo'\"\n (undoClicked)=\"onUndoClick()\"\n [redoDisabled]=\"config.redoDisabled\"\n [redoButtonId]=\"getPendoId('aiRedoButton')\"\n [redoButtonTitle]=\"'Redo'\"\n (redoClicked)=\"onRedoClick()\">\n </symphony-input-textarea-with-send>\n </div>\n </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.ai-drawer-container{position:absolute;top:0;right:0;width:100%;max-width:500px;height:100%;background-color:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.15);z-index:9999;display:flex;flex-direction:column;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ai-drawer-container.open{transform:translate(0)}@media (max-width: 768px){.ai-drawer-container{width:100%;box-shadow:none}}.ai-drawer-edge-toggle{position:absolute;top:50%;left:-48px;transform:translateY(-50%);width:48px;height:48px;border:1px solid #D2D8E5;border-radius:8px 0 0 8px;background-color:#2b8ff3;color:#fff;cursor:pointer;box-shadow:-2px 0 8px rgba(0,0,0,.15);z-index:10001;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.ai-drawer-edge-toggle:hover{background-color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.2);transform:translateY(-50%) scale(1.02)}.ai-drawer-edge-toggle:focus{outline:2px solid #2B8FF3;outline-offset:2px}.ai-drawer-edge-toggle symphony-icon{font-size:20px;transition:transform .2s ease;display:block;line-height:1;color:#fff}.ai-drawer-edge-toggle.drawer-open{left:-35px;background-color:#fff;color:#2b8ff3;border-color:#d2d8e5;border-radius:8px 0 0 8px;box-shadow:-2px 0 8px rgba(0,0,0,.1)}.ai-drawer-edge-toggle.drawer-open:hover{background-color:#f1f2f5;color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.15);transform:translateY(-50%) scale(1.02)}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:18px;color:#2b8ff3}@media (max-width: 768px){.ai-drawer-edge-toggle{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle symphony-icon{font-size:18px}.ai-drawer-edge-toggle.drawer-open{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:16px}}.ai-drawer-header{display:flex;align-items:center;justify-content:center;padding:.625rem .9375rem;border-bottom:1px solid #D2D8E5;background-color:#c5aeff;position:relative;z-index:1}.ai-drawer-header .ai-drawer-title{font-size:18px;color:#000;text-align:center}.ai-drawer-header .ai-drawer-title-highlight{font-weight:700}.ai-drawer-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.ai-chat-container{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:.9375rem 1.5625rem}.ai-chat-container::-webkit-scrollbar{width:6px}.ai-chat-container::-webkit-scrollbar-track{background:#F1F2F5}.ai-chat-container::-webkit-scrollbar-thumb{background:#C3CBDC;border-radius:3px}.ai-chat-container::-webkit-scrollbar-thumb:hover{background:#5B6D80}.ai-message-list{display:flex;flex-direction:column;gap:.9375rem}.ai-message-wrapper{display:flex;flex-direction:column}.ai-message-wrapper[data-message-type=user]{align-items:flex-end}.ai-message-wrapper[data-message-type=ai],.ai-message-wrapper[data-message-type=system],.ai-message-wrapper.ai-loading-message{align-items:flex-start}.ai-message-timestamp-container{margin-bottom:.625rem;text-align:center;width:100%;align-self:center}.ai-message-timestamp-container .ai-message-timestamp{font-size:.75rem;color:#82919f;font-weight:500}.ai-message-bubble{max-width:80%;border-radius:12px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;animation:messageSlideIn .3s ease-out;display:flex;gap:.625rem}.ai-message-bubble.user-message{background-color:#2b8ff3;color:#fff;border-bottom-right-radius:4px;padding:.625rem .9375rem;justify-content:flex-end}.ai-message-bubble.user-message .ai-message-content-wrapper{display:flex;flex-direction:column;align-items:flex-end}.ai-message-bubble.ai-message{background-color:#fff;border:1px solid #D2D8E5;color:#08203e;border-bottom-left-radius:4px;padding:.625rem .9375rem;align-items:flex-start}.ai-message-bubble.ai-message .ai-message-icon{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;margin-top:2px;background:linear-gradient(90deg,#a21aff,#351cc1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.ai-message-bubble.ai-message .ai-message-icon symphony-icon{font-size:.875rem}.ai-message-bubble.ai-message .ai-message-content-wrapper{flex:1;display:flex;flex-direction:column}.ai-message-bubble.system-message{background-color:#f1f2f5;border:1px solid #E4E7EF;color:#5b6d80;border-radius:8px;text-align:center;max-width:90%;padding:.625rem .9375rem;justify-content:center}.ai-message-bubble.system-message .ai-message-content{font-size:.875rem}@media (max-width: 768px){.ai-message-bubble{max-width:90%}}.ai-message-status{margin-top:.3rem;text-align:right}.ai-message-status .ai-status-text{display:inline-flex;gap:4px;font-size:.75rem;font-weight:500}.ai-message-status .ai-status-text.status-delivered{color:#5b6d80}.ai-message-status .ai-status-text.status-delivered .ai-status-icon{color:#2cb45f;font-size:12px}.ai-message-status .ai-status-text.status-pending{color:#5b6d80}.ai-message-status .ai-status-text.status-pending .ai-status-loader{width:12px;height:12px}.ai-message-status .ai-status-text.status-error{color:#ac4463}.ai-message-status .ai-status-text.status-error .ai-status-icon{color:#ac4463;font-size:12px}.ai-loading-message .ai-message-bubble .ai-message-icon{flex:0 0 auto;width:24px;height:24px;background-color:#f0f8ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:2px}.ai-loading-message .ai-message-bubble .ai-message-icon symphony-icon{color:#2b8ff3;font-size:.875rem}.ai-loading-message .ai-message-bubble .ai-loading-content{display:flex;align-items:center;gap:.625rem;flex:1}.ai-loading-message .ai-message-bubble .ai-loading-text{font-style:italic;color:#5b6d80;font-size:.875rem}.ai-suggested-prompts-section{border-top:1px solid #E4E7EF;background-color:#f1f2f5;margin-bottom:0;position:relative;min-height:48px}.ai-prompts-intro-row{position:relative;padding:12px 14px 0;display:flex;align-items:center}.ai-prompts-intro-row .ai-prompts-intro{margin:0 auto;padding:0;font-size:.875rem;color:#5b6d80;line-height:1.4;text-align:center;position:relative;max-width:calc(100% - 60px);display:block}.ai-prompts-intro-row .ai-suggestions-toggle-compact{right:8px;width:28px;height:28px;border-radius:50%;border:none;background:#fff;color:#712ace;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s;box-shadow:0 1px 4px rgba(80,0,120,.04);font-size:15px;padding:0;margin:0}.ai-prompts-intro-row .ai-suggestions-toggle-compact:hover:not(:disabled){background:#f3f0ff;color:#5a21a4}.ai-prompts-intro-row .ai-suggestions-toggle-compact:focus{outline:2px solid #814DFF;outline-offset:2px}.ai-prompts-intro-row .ai-suggestions-toggle-compact:disabled{opacity:.5;cursor:not-allowed}.ai-prompts-intro-row .ai-suggestions-toggle-compact symphony-icon{font-size:15px;transition:transform .2s;transform:rotate(0)}.ai-prompts-intro-row .ai-suggestions-toggle-compact.suggestions-open symphony-icon{transform:rotate(180deg)}.ai-suggested-prompts{position:static;max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1);opacity:0;padding:1.25rem 1.5625rem;background-color:#f1f2f5}.ai-suggested-prompts.open{max-height:500px;opacity:1}.ai-suggested-prompts.disabled{opacity:.7;pointer-events:none}.ai-suggested-prompts .ai-prompt-button:disabled{cursor:not-allowed;opacity:.7}.ai-suggested-prompts .ai-prompts-intro{font-size:.875rem;color:#5b6d80;text-align:center;line-height:1.4}.ai-suggested-prompts .ai-prompts-list{display:flex;flex-direction:column;gap:.625rem}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button{display:flex;align-items:center;gap:.625rem;padding:.625rem .9375rem;border:1px solid #C5AEFF;border-radius:24px;background-color:transparent;color:#712ace;cursor:pointer;transition:all .2s ease;text-align:left;font-size:.875rem;min-height:48px}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:hover{background-color:#f3f0ff;border-color:#9d79ff;transform:translateY(-1px)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:active{transform:translateY(0)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-icon{flex:0 0 auto;color:#712ace;font-size:16px;display:flex}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-text{flex:1;font-weight:400;line-height:1.3}.ai-drawer-footer{padding:.9375rem 1.5625rem 1.25rem;border-top:1px solid #D2D8E5;background-color:#fff;position:relative;z-index:1}.ai-suggested-prompts-section+.ai-drawer-footer{padding-top:.3rem;padding-bottom:.9375rem}.ai-input-row symphony-input-textarea-with-send{width:100%}.ai-footer-actions{text-align:center}.ai-footer-actions symphony-button-v2{font-size:.75rem;color:#5b6d80}.ai-footer-actions symphony-button-v2:hover{color:#08203e}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.ai-drawer-container{border:2px solid #08203E}.ai-message-bubble.user-message{border:1px solid #0a5cae}.ai-message-bubble.ai-message{border:2px solid #5B6D80}.ai-message-bubble.system-message{border:2px solid #C3CBDC}}@media (prefers-reduced-motion: reduce){.ai-drawer-container,.ai-message-bubble,.ai-drawer-edge-toggle{transition:none;animation:none}}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }, { type: TaskStatusComponent, selector: "symphony-task-status", inputs: ["taskStatusModel"], outputs: ["cancelTask", "retryTask"] }, { type: InputTextareaWithSendComponent, selector: "symphony-input-textarea-with-send", inputs: ["placeholder", "isDisabled", "maxCharacterLimit", "showCharacterCount", "minRows", "maxRows", "sendButtonIcon", "sendButtonAriaLabel", "autoResize", "showStartOverButton", "showUndoRedoButtons", "startOverButtonId", "startOverDisabled", "startOverButtonIcon", "startOverButtonTitle", "undoButtonId", "undoDisabled", "undoButtonIcon", "undoButtonTitle", "redoButtonId", "redoDisabled", "redoButtonIcon", "redoButtonTitle"], outputs: ["sendClicked", "enterPressed", "valueChanged", "startOverClicked", "undoClicked", "redoClicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "newLineToBr": NewLineToBrPipe } });
|
|
7915
7917
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AISearchAssistantDrawerComponent, decorators: [{
|
|
7916
7918
|
type: Component,
|
|
7917
|
-
args: [{ selector: 'symphony-ai-search-assistant-drawer', template: "<!-- Drawer Container -->\n<div \n class=\"ai-drawer-container\" \n [class.open]=\"model.isOpen\"\n [id]=\"getPendoId('aiAssistantDrawer')\">\n \n <!-- Edge Toggle Button (inside drawer container) -->\n <button \n class=\"ai-drawer-edge-toggle\"\n [class.drawer-open]=\"model.isOpen\"\n (click)=\"onToggleDrawer()\"\n [attr.aria-label]=\"model.isOpen ? 'Close Tala Assistant' : 'Open Tala Assistant'\"\n [title]=\"model.isOpen ? 'Close Tala Assistant' : 'Tala Assisted Messaging'\"\n [id]=\"getPendoId('aiAssistantToggle')\">\n <symphony-icon [icon]=\"model.isOpen ? 'si-arrow-next' : 'si-arrow-prev'\"></symphony-icon>\n </button>\n \n <!-- Header -->\n <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n <div class=\"ai-drawer-title sfx-m-0\">\n Build your email with \n <span class=\"ai-drawer-title-highlight\">Tala</span>, Symphony Talent's AI-powered Talent Acquisition Assistant.\n </div>\n </div>\n </div>\n\n <!-- Chat Container -->\n <div class=\"ai-drawer-body\" *ngIf=\"model.isOpen\">\n \n <!-- Messages Area -->\n <div \n class=\"ai-chat-container\" \n #chatContainer>\n \n <!-- Message List -->\n <div class=\"ai-message-list sfx-mb-20\">\n <div \n *ngFor=\"let message of model.messages; trackBy: trackByMessageId\"\n class=\"ai-message-wrapper\"\n [attr.data-message-type]=\"message.type\">\n \n <!-- Timestamp Above Message -->\n <div \n class=\"ai-message-timestamp-container\"\n *ngIf=\"config.showTimestamps\">\n <span class=\"ai-message-timestamp\">\n {{ getMessageTime(message.timestamp) }}\n </span>\n </div>\n \n <!-- Message Bubble -->\n <div \n class=\"ai-message-bubble\"\n [class.user-message]=\"message.type === 'user'\"\n [class.ai-message]=\"message.type === 'ai'\"\n [class.system-message]=\"message.type === 'system'\">\n \n <!-- AI Message Icon -->\n <div \n class=\"ai-message-icon\" \n *ngIf=\"message.type === 'ai'\">\n <symphony-icon [icon]=\"'si-ai-withoutBorder'\"></symphony-icon>\n </div>\n \n <div class=\"ai-message-content-wrapper\">\n <symphony-paragraph \n class=\"ai-message-content sfx-m-0\"\n [innerHTML]=\"message.content | newLineToBr\">\n </symphony-paragraph>\n </div>\n </div>\n \n <!-- Message Status (for user messages) -->\n <div \n class=\"ai-message-status\"\n *ngIf=\"message.type === 'user' && message.status\">\n <span \n class=\"ai-status-text\"\n [class.status-delivered]=\"message.status === 'delivered'\"\n [class.status-pending]=\"message.status === 'pending'\"\n [class.status-error]=\"message.status === 'error'\">\n {{ getStatusText(message.status) }}\n </span>\n </div>\n </div>\n\n <!-- AI Task Status (Progress Bar and Error Handling) -->\n\n <div \n *ngIf=\"model.aiTaskStatus\"\n class=\"ai-message-wrapper task-status-wrapper\"\n id=\"taskStatusMessage\">\n <symphony-task-status\n [taskStatusModel]=\"model.aiTaskStatus\"\n (cancelTask)=\"onCancelTask()\"\n (retryTask)=\"onRetryTask()\"\n [id]=\"getPendoId('aiTaskStatus')\">\n </symphony-task-status>\n </div>\n </div>\n </div>\n\n <!-- Suggested Prompts Section -->\n <div \n class=\"ai-suggested-prompts-section\"\n *ngIf=\"config.enableSuggestedPrompts && model.suggestedPrompts.length > 0\">\n <div class=\"ai-prompts-intro-row\">\n <symphony-paragraph class=\"ai-prompts-intro sfx-mb-15\">\n {{ model.isSuggestionsOpen ? 'Here are a few suggested prompts to get you started.' : 'Need help getting started?' }}\n </symphony-paragraph>\n <button\n class=\"ai-suggestions-toggle-compact\"\n [class.suggestions-open]=\"model.isSuggestionsOpen\"\n (click)=\"onToggleSuggestions()\"\n [attr.aria-label]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n [title]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n [id]=\"getPendoId('aiSuggestionsToggle')\"\n [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n <symphony-icon [icon]=\"'si-arrow-hide-reveal'\"></symphony-icon>\n </button>\n </div>\n <div \n class=\"ai-suggested-prompts\" \n *ngIf=\"model.isSuggestionsOpen\"\n [class.open]=\"model.isSuggestionsOpen\"\n [id]=\"getPendoId('aiSuggestedPrompts')\"\n [class.disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n <div class=\"ai-prompts-list\">\n <button\n *ngFor=\"let prompt of model.suggestedPrompts; let i = index\"\n class=\"ai-prompt-button\"\n (click)=\"onPromptClick(prompt)\"\n [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n [id]=\"getPendoId('aiPromptButton-' + i)\">\n <symphony-icon \n *ngIf=\"prompt.icon\" \n [icon]=\"'si-' + prompt.icon\"\n class=\"ai-prompt-icon\">\n </symphony-icon>\n <span class=\"ai-prompt-text\">{{ prompt.text }}</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Footer / Input Area -->\n <div class=\"ai-drawer-footer\" *ngIf=\"model.isOpen\">\n \n <!-- Input Row -->\n <div class=\"ai-input-row\">\n <symphony-input-textarea-with-send\n #messageInput\n [(ngModel)]=\"model.inputValue\"\n [placeholder]=\"config.placeholder\"\n [isDisabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n [maxCharacterLimit]=\"model.maxCharacterLimit\"\n [showCharacterCount]=\"!!model.maxCharacterLimit\"\n (sendClicked)=\"onSendMessage()\"\n (valueChanged)=\"onInputChange($event)\"\n (enterPressed)=\"onSendMessage()\"\n [id]=\"getPendoId('aiMessageInput')\"\n [showStartOverButton]=\"config.showStartOverButton\"\n [startOverDisabled]=\"false\"\n [startOverButtonId]=\"getPendoId('aiStartOverButton')\"\n [startOverButtonTitle]=\"'Start Again'\"\n (startOverClicked)=\"onStartOverClick()\"\n [undoDisabled]=\"config.undoDisabled\"\n [undoButtonId]=\"getPendoId('aiUndoButton')\"\n [undoButtonTitle]=\"'Undo'\"\n (undoClicked)=\"onUndoClick()\"\n [redoDisabled]=\"config.redoDisabled\"\n [redoButtonId]=\"getPendoId('aiRedoButton')\"\n [redoButtonTitle]=\"'Redo'\"\n (redoClicked)=\"onRedoClick()\">\n </symphony-input-textarea-with-send>\n </div>\n </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.ai-drawer-container{position:absolute;top:0;right:0;width:100%;max-width:500px;height:100%;background-color:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.15);z-index:9999;display:flex;flex-direction:column;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ai-drawer-container.open{transform:translate(0)}@media (max-width: 768px){.ai-drawer-container{width:100%;box-shadow:none}}.ai-drawer-edge-toggle{position:absolute;top:50%;left:-48px;transform:translateY(-50%);width:48px;height:48px;border:1px solid #D2D8E5;border-radius:8px 0 0 8px;background-color:#2b8ff3;color:#fff;cursor:pointer;box-shadow:-2px 0 8px rgba(0,0,0,.15);z-index:10001;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.ai-drawer-edge-toggle:hover{background-color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.2);transform:translateY(-50%) scale(1.02)}.ai-drawer-edge-toggle:focus{outline:2px solid #2B8FF3;outline-offset:2px}.ai-drawer-edge-toggle symphony-icon{font-size:20px;transition:transform .2s ease;display:block;line-height:1;color:#fff}.ai-drawer-edge-toggle.drawer-open{left:-35px;background-color:#fff;color:#2b8ff3;border-color:#d2d8e5;border-radius:8px 0 0 8px;box-shadow:-2px 0 8px rgba(0,0,0,.1)}.ai-drawer-edge-toggle.drawer-open:hover{background-color:#f1f2f5;color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.15);transform:translateY(-50%) scale(1.02)}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:18px;color:#2b8ff3}@media (max-width: 768px){.ai-drawer-edge-toggle{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle symphony-icon{font-size:18px}.ai-drawer-edge-toggle.drawer-open{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:16px}}.ai-drawer-header{display:flex;align-items:center;justify-content:center;padding:.625rem .9375rem;border-bottom:1px solid #D2D8E5;background-color:#c5aeff;position:relative;z-index:1}.ai-drawer-header .ai-drawer-title{font-size:18px;color:#000;text-align:center}.ai-drawer-header .ai-drawer-title-highlight{font-weight:700}.ai-drawer-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.ai-chat-container{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:.9375rem 1.5625rem}.ai-chat-container::-webkit-scrollbar{width:6px}.ai-chat-container::-webkit-scrollbar-track{background:#F1F2F5}.ai-chat-container::-webkit-scrollbar-thumb{background:#C3CBDC;border-radius:3px}.ai-chat-container::-webkit-scrollbar-thumb:hover{background:#5B6D80}.ai-message-list{display:flex;flex-direction:column;gap:.9375rem}.ai-message-wrapper{display:flex;flex-direction:column}.ai-message-wrapper[data-message-type=user]{align-items:flex-end}.ai-message-wrapper[data-message-type=ai],.ai-message-wrapper[data-message-type=system],.ai-message-wrapper.ai-loading-message{align-items:flex-start}.ai-message-timestamp-container{margin-bottom:.625rem;text-align:center;width:100%;align-self:center}.ai-message-timestamp-container .ai-message-timestamp{font-size:.75rem;color:#82919f;font-weight:500}.ai-message-bubble{max-width:80%;border-radius:12px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;animation:messageSlideIn .3s ease-out;display:flex;gap:.625rem}.ai-message-bubble.user-message{background-color:#2b8ff3;color:#fff;border-bottom-right-radius:4px;padding:.625rem .9375rem;justify-content:flex-end}.ai-message-bubble.user-message .ai-message-content-wrapper{display:flex;flex-direction:column;align-items:flex-end}.ai-message-bubble.ai-message{background-color:#fff;border:1px solid #D2D8E5;color:#08203e;border-bottom-left-radius:4px;padding:.625rem .9375rem;align-items:flex-start}.ai-message-bubble.ai-message .ai-message-icon{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;margin-top:2px;background:linear-gradient(90deg,#a21aff,#351cc1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.ai-message-bubble.ai-message .ai-message-icon symphony-icon{font-size:.875rem}.ai-message-bubble.ai-message .ai-message-content-wrapper{flex:1;display:flex;flex-direction:column}.ai-message-bubble.system-message{background-color:#f1f2f5;border:1px solid #E4E7EF;color:#5b6d80;border-radius:8px;text-align:center;max-width:90%;padding:.625rem .9375rem;justify-content:center}.ai-message-bubble.system-message .ai-message-content{font-size:.875rem}@media (max-width: 768px){.ai-message-bubble{max-width:90%}}.ai-message-status{margin-top:.3rem;text-align:right}.ai-message-status .ai-status-text{display:inline-flex;gap:4px;font-size:.75rem;font-weight:500}.ai-message-status .ai-status-text.status-delivered{color:#5b6d80}.ai-message-status .ai-status-text.status-delivered .ai-status-icon{color:#2cb45f;font-size:12px}.ai-message-status .ai-status-text.status-pending{color:#5b6d80}.ai-message-status .ai-status-text.status-pending .ai-status-loader{width:12px;height:12px}.ai-message-status .ai-status-text.status-error{color:#ac4463}.ai-message-status .ai-status-text.status-error .ai-status-icon{color:#ac4463;font-size:12px}.ai-loading-message .ai-message-bubble .ai-message-icon{flex:0 0 auto;width:24px;height:24px;background-color:#f0f8ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:2px}.ai-loading-message .ai-message-bubble .ai-message-icon symphony-icon{color:#2b8ff3;font-size:.875rem}.ai-loading-message .ai-message-bubble .ai-loading-content{display:flex;align-items:center;gap:.625rem;flex:1}.ai-loading-message .ai-message-bubble .ai-loading-text{font-style:italic;color:#5b6d80;font-size:.875rem}.ai-suggested-prompts-section{border-top:1px solid #E4E7EF;background-color:#f1f2f5;margin-bottom:0;position:relative;min-height:48px}.ai-prompts-intro-row{position:relative;padding:12px 14px 0;display:flex;align-items:center}.ai-prompts-intro-row .ai-prompts-intro{margin:0 auto;padding:0;font-size:.875rem;color:#5b6d80;line-height:1.4;text-align:center;position:relative;max-width:calc(100% - 60px);display:block}.ai-prompts-intro-row .ai-suggestions-toggle-compact{right:8px;width:28px;height:28px;border-radius:50%;border:none;background:#fff;color:#712ace;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s;box-shadow:0 1px 4px rgba(80,0,120,.04);font-size:15px;padding:0;margin:0}.ai-prompts-intro-row .ai-suggestions-toggle-compact:hover:not(:disabled){background:#f3f0ff;color:#5a21a4}.ai-prompts-intro-row .ai-suggestions-toggle-compact:focus{outline:2px solid #814DFF;outline-offset:2px}.ai-prompts-intro-row .ai-suggestions-toggle-compact:disabled{opacity:.5;cursor:not-allowed}.ai-prompts-intro-row .ai-suggestions-toggle-compact symphony-icon{font-size:15px;transition:transform .2s;transform:rotate(0)}.ai-prompts-intro-row .ai-suggestions-toggle-compact.suggestions-open symphony-icon{transform:rotate(180deg)}.ai-suggested-prompts{position:static;max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1);opacity:0;padding:1.25rem 1.5625rem;background-color:#f1f2f5}.ai-suggested-prompts.open{max-height:500px;opacity:1}.ai-suggested-prompts.disabled{opacity:.7;pointer-events:none}.ai-suggested-prompts .ai-prompt-button:disabled{cursor:not-allowed;opacity:.7}.ai-suggested-prompts .ai-prompts-intro{font-size:.875rem;color:#5b6d80;text-align:center;line-height:1.4}.ai-suggested-prompts .ai-prompts-list{display:flex;flex-direction:column;gap:.625rem}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button{display:flex;align-items:center;gap:.625rem;padding:.625rem .9375rem;border:1px solid #C5AEFF;border-radius:24px;background-color:transparent;color:#712ace;cursor:pointer;transition:all .2s ease;text-align:left;font-size:.875rem;min-height:48px}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:hover{background-color:#f3f0ff;border-color:#9d79ff;transform:translateY(-1px)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:active{transform:translateY(0)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-icon{flex:0 0 auto;color:#712ace;font-size:16px;display:flex}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-text{flex:1;font-weight:400;line-height:1.3}.ai-drawer-footer{padding:.9375rem 1.5625rem 1.25rem;border-top:1px solid #D2D8E5;background-color:#fff;position:relative;z-index:1}.ai-suggested-prompts-section+.ai-drawer-footer{padding-top:.3rem;padding-bottom:.9375rem}.ai-input-row symphony-input-textarea-with-send{width:100%}.ai-footer-actions{text-align:center}.ai-footer-actions symphony-button-v2{font-size:.75rem;color:#5b6d80}.ai-footer-actions symphony-button-v2:hover{color:#08203e}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.ai-drawer-container{border:2px solid #08203E}.ai-message-bubble.user-message{border:1px solid #0a5cae}.ai-message-bubble.ai-message{border:2px solid #5B6D80}.ai-message-bubble.system-message{border:2px solid #C3CBDC}}@media (prefers-reduced-motion: reduce){.ai-drawer-container,.ai-message-bubble,.ai-drawer-edge-toggle{transition:none;animation:none}}\n"] }]
|
|
7919
|
+
args: [{ selector: 'symphony-ai-search-assistant-drawer', template: "<!-- Drawer Container -->\n<div \n class=\"ai-drawer-container\" \n [class.open]=\"model.isOpen\"\n [id]=\"getPendoId('aiAssistantDrawer')\">\n \n <!-- Edge Toggle Button (inside drawer container) -->\n <button \n class=\"ai-drawer-edge-toggle\"\n [class.drawer-open]=\"model.isOpen\"\n (click)=\"onToggleDrawer()\"\n [attr.aria-label]=\"model.isOpen ? 'Close Tala Assistant' : 'Open Tala Assistant'\"\n [title]=\"model.isOpen ? 'Close Tala Assistant' : 'Tala Assisted Messaging'\"\n [id]=\"getPendoId('aiAssistantToggle')\">\n <symphony-icon [icon]=\"model.isOpen ? 'si-arrow-next' : 'si-arrow-prev'\"></symphony-icon>\n </button>\n \n <!-- Header -->\n <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n <div class=\"ai-drawer-header\" *ngIf=\"model.isOpen\">\n <div class=\"ai-drawer-title sfx-m-0\">\n Build your email with \n <span class=\"ai-drawer-title-highlight\">Tala</span>, Symphony Talent's AI-powered Talent Acquisition Assistant.\n </div>\n </div>\n </div>\n\n <!-- Chat Container -->\n <div class=\"ai-drawer-body\" *ngIf=\"model.isOpen\">\n \n <!-- Messages Area -->\n <div \n class=\"ai-chat-container\" \n #chatContainer>\n \n <!-- Message List -->\n <div class=\"ai-message-list sfx-mb-20\">\n <div \n *ngFor=\"let message of model.messages; trackBy: trackByMessageId\"\n class=\"ai-message-wrapper\"\n [attr.data-message-type]=\"message.type\">\n \n <!-- Timestamp Above Message -->\n <div \n class=\"ai-message-timestamp-container\"\n *ngIf=\"config.showTimestamps\">\n <span class=\"ai-message-timestamp\">\n {{ getMessageTime(message.timestamp) }}\n </span>\n </div>\n \n <!-- Message Bubble -->\n <div \n class=\"ai-message-bubble\"\n [class.user-message]=\"message.type === 'user'\"\n [class.ai-message]=\"message.type === 'ai'\"\n [class.system-message]=\"message.type === 'system'\">\n \n <!-- AI Message Icon -->\n <div \n class=\"ai-message-icon\" \n *ngIf=\"message.type === 'ai'\">\n <symphony-icon [icon]=\"'si-ai-withoutBorder'\"></symphony-icon>\n </div>\n \n <div class=\"ai-message-content-wrapper\">\n <symphony-paragraph \n class=\"ai-message-content sfx-m-0\"\n [innerHTML]=\"message.content | newLineToBr\">\n </symphony-paragraph>\n </div>\n </div>\n \n <!-- Message Status (for user messages) -->\n <div \n class=\"ai-message-status\"\n *ngIf=\"message.type === 'user' && message.status\">\n <span \n class=\"ai-status-text\"\n [class.status-delivered]=\"message.status === 'delivered'\"\n [class.status-pending]=\"message.status === 'pending'\"\n [class.status-error]=\"message.status === 'error'\">\n {{ getStatusText(message.status) }}\n </span>\n </div>\n </div>\n\n <!-- AI Task Status (Progress Bar and Error Handling) -->\n\n <div \n *ngIf=\"model.aiTaskStatus\"\n class=\"ai-message-wrapper task-status-wrapper\"\n id=\"taskStatusMessage\">\n <symphony-task-status\n [taskStatusModel]=\"model.aiTaskStatus\"\n (cancelTask)=\"onCancelTask()\"\n (retryTask)=\"onRetryTask()\"\n [id]=\"getPendoId('aiTaskStatus')\">\n </symphony-task-status>\n </div>\n </div>\n </div>\n\n <!-- Suggested Prompts Section -->\n <div \n class=\"ai-suggested-prompts-section\"\n *ngIf=\"config.enableSuggestedPrompts && model.suggestedPrompts.length > 0\">\n <div class=\"ai-prompts-intro-row\">\n <symphony-paragraph class=\"ai-prompts-intro sfx-mb-15\">\n {{ model.isSuggestionsOpen ? 'Here are a few suggested prompts to get you started.' : 'Need help getting started?' }}\n </symphony-paragraph>\n <button\n class=\"ai-suggestions-toggle-compact\"\n [class.suggestions-open]=\"model.isSuggestionsOpen\"\n (click)=\"onToggleSuggestions()\"\n [attr.aria-label]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n [title]=\"model.isSuggestionsOpen ? 'Hide suggestions' : 'Show suggestions'\"\n [id]=\"getPendoId('aiSuggestionsToggle')\"\n [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n <symphony-icon [icon]=\"'si-arrow-hide-reveal'\"></symphony-icon>\n </button>\n </div>\n <div \n class=\"ai-suggested-prompts\" \n *ngIf=\"model.isSuggestionsOpen\"\n [class.open]=\"model.isSuggestionsOpen\"\n [id]=\"getPendoId('aiSuggestedPrompts')\"\n [class.disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\">\n <div class=\"ai-prompts-list\">\n <button\n *ngFor=\"let prompt of model.suggestedPrompts; let i = index\"\n class=\"ai-prompt-button\"\n (click)=\"onPromptClick(prompt)\"\n [disabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n [id]=\"getPendoId('aiPromptButton-' + i)\">\n <symphony-icon \n *ngIf=\"prompt.icon\" \n [icon]=\"'si-' + prompt.icon\"\n class=\"ai-prompt-icon\">\n </symphony-icon>\n <span class=\"ai-prompt-text\">{{ prompt.text }}</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Footer / Input Area -->\n <div class=\"ai-drawer-footer\" *ngIf=\"model.isOpen\">\n \n <!-- Input Row -->\n <div class=\"ai-input-row\">\n <symphony-input-textarea-with-send\n #messageInput\n [(ngModel)]=\"model.inputValue\"\n [placeholder]=\"config.placeholder\"\n [isDisabled]=\"model.isLoading || model.aiTaskStatus?.showProgressBar\"\n [maxCharacterLimit]=\"model.maxCharacterLimit\"\n [showCharacterCount]=\"!!model.maxCharacterLimit\"\n (sendClicked)=\"onSendMessage()\"\n (valueChanged)=\"onInputChange($event)\"\n (enterPressed)=\"onSendMessage()\"\n [id]=\"getPendoId('aiMessageInput')\"\n [showStartOverButton]=\"config.showStartOverButton\"\n [startOverDisabled]=\"false\"\n [startOverButtonId]=\"getPendoId('aiStartOverButton')\"\n [startOverButtonTitle]=\"'Start Again'\"\n (startOverClicked)=\"onStartOverClick()\"\n [showUndoRedoButtons]=\"config.showUndoRedoButtons\"\n [undoDisabled]=\"config.undoDisabled\"\n [undoButtonId]=\"getPendoId('aiUndoButton')\"\n [undoButtonTitle]=\"'Undo'\"\n (undoClicked)=\"onUndoClick()\"\n [redoDisabled]=\"config.redoDisabled\"\n [redoButtonId]=\"getPendoId('aiRedoButton')\"\n [redoButtonTitle]=\"'Redo'\"\n (redoClicked)=\"onRedoClick()\">\n </symphony-input-textarea-with-send>\n </div>\n </div>\n</div> ", styles: [".sfx-p-0{padding:0}.sfx-p-5{padding:.3rem}.sfx-p-10{padding:.625rem}.sfx-p-15{padding:.9375rem}.sfx-p-20{padding:1.25rem}.sfx-p-30{padding:1.875rem}.sfx-pt-0{padding-top:0}.sfx-pt-5{padding-top:.3rem}.sfx-pt-10{padding-top:.625rem}.sfx-pt-15{padding-top:.9375rem}.sfx-pt-20{padding-top:1.25rem}.sfx-pt-25{padding-top:1.5625rem}.sfx-pt-30{padding-top:1.875rem}.sfx-pt-35{padding-top:2.1875rem}.sfx-pt-40{padding-top:2.5rem}.sfx-pt-50{padding-top:3.125rem}.sfx-pb-0{padding-bottom:0}.sfx-pb-5{padding-bottom:.3rem}.sfx-pb-10{padding-bottom:.625rem}.sfx-pb-15{padding-bottom:.9375rem}.sfx-pb-20{padding-bottom:1.25rem}.sfx-pb-25{padding-bottom:1.5625rem}.sfx-pb-30{padding-bottom:1.875rem}.sfx-pb-35{padding-bottom:2.1875rem}.sfx-pb-40{padding-bottom:2.5rem}.sfx-pb-50{padding-bottom:3.125rem}.sfx-pl-0{padding-left:0}.sfx-pl-5{padding-left:.3rem}.sfx-pl-10{padding-left:.625rem}.sfx-pl-15{padding-left:.9375rem}.sfx-pl-20{padding-left:1.25rem}.sfx-pl-25{padding-left:1.5625rem}.sfx-pl-30{padding-left:1.875rem}.sfx-pr-0{padding-right:0}.sfx-pr-5{padding-right:.3rem}.sfx-pr-10{padding-right:.625rem}.sfx-pr-15{padding-right:.9375rem}.sfx-pr-20{padding-right:1.25rem}.sfx-pr-25{padding-right:1.5625rem}.sfx-pr-30{padding-right:1.875rem}.sfx-py-15{padding-left:.9375rem;padding-right:.9375rem}.sfx-py-30{padding-left:1.875rem;padding-right:1.875rem}.sfx-px-0{padding-top:0;padding-bottom:0}.sfx-px-15{padding-top:.9375rem;padding-bottom:.9375rem}.sfx-px-20{padding-top:1.25rem;padding-bottom:1.25rem}.sfx-px-30{padding-top:1.875rem;padding-bottom:1.875rem}.sfx-m-0{margin:0}.sfx-m-5{margin:.3rem}.sfx-m-10{margin:.625rem}.sfx-m-15{margin:.9375rem}.sfx-m-20{margin:1.25rem}.sfx-m-auto{margin:0 auto}.sfx-mt-0{margin-top:0}.sfx-mt-5{margin-top:.3rem}.sfx-mt-10{margin-top:.625rem}.sfx-mt-15{margin-top:.9375rem}.sfx-mt-20{margin-top:1.25rem}.sfx-mt-25{margin-top:1.5625rem}.sfx-mt-30{margin-top:1.875rem}.sfx-mt-40{margin-top:2.5rem}.sfx-mt-80{margin-top:5rem}.sfx-mb-0{margin-bottom:0}.sfx-mb-5{margin-bottom:.3rem}.sfx-mb-10{margin-bottom:.625rem}.sfx-mb-15{margin-bottom:.9375rem}.sfx-mb-20{margin-bottom:1.25rem}.sfx-mb-25{margin-bottom:1.5625rem}.sfx-mb-30{margin-bottom:1.875rem}.sfx-mb-40{margin-bottom:2.5rem}.sfx-mb-50{margin-bottom:3.125rem}.sfx-ml-0{margin-left:0}.sfx-ml-5{margin-left:.3rem}.sfx-ml-10{margin-left:.625rem}.sfx-ml-15{margin-left:.9375rem}.sfx-ml-20{margin-left:1.25rem}.sfx-ml-auto{margin-left:auto}.sfx-mr-0{margin-right:0}.sfx-mr-5{margin-right:.3rem}.sfx-mr-10{margin-right:.625rem}.sfx-mr-15{margin-right:.9375rem}.sfx-mr-20{margin-right:1.25rem}.sfx-mr-25{margin-right:1.5625rem}.sfx-mr-30{margin-right:1.875rem}.sfx-mr-40{margin-right:2.5rem}.ai-drawer-container{position:absolute;top:0;right:0;width:100%;max-width:500px;height:100%;background-color:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.15);z-index:9999;display:flex;flex-direction:column;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.ai-drawer-container.open{transform:translate(0)}@media (max-width: 768px){.ai-drawer-container{width:100%;box-shadow:none}}.ai-drawer-edge-toggle{position:absolute;top:50%;left:-48px;transform:translateY(-50%);width:48px;height:48px;border:1px solid #D2D8E5;border-radius:8px 0 0 8px;background-color:#2b8ff3;color:#fff;cursor:pointer;box-shadow:-2px 0 8px rgba(0,0,0,.15);z-index:10001;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.ai-drawer-edge-toggle:hover{background-color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.2);transform:translateY(-50%) scale(1.02)}.ai-drawer-edge-toggle:focus{outline:2px solid #2B8FF3;outline-offset:2px}.ai-drawer-edge-toggle symphony-icon{font-size:20px;transition:transform .2s ease;display:block;line-height:1;color:#fff}.ai-drawer-edge-toggle.drawer-open{left:-35px;background-color:#fff;color:#2b8ff3;border-color:#d2d8e5;border-radius:8px 0 0 8px;box-shadow:-2px 0 8px rgba(0,0,0,.1)}.ai-drawer-edge-toggle.drawer-open:hover{background-color:#f1f2f5;color:#0d76de;box-shadow:-4px 0 12px rgba(0,0,0,.15);transform:translateY(-50%) scale(1.02)}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:18px;color:#2b8ff3}@media (max-width: 768px){.ai-drawer-edge-toggle{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle symphony-icon{font-size:18px}.ai-drawer-edge-toggle.drawer-open{left:-40px;width:40px;height:40px}.ai-drawer-edge-toggle.drawer-open symphony-icon{font-size:16px}}.ai-drawer-header{display:flex;align-items:center;justify-content:center;padding:.625rem .9375rem;border-bottom:1px solid #D2D8E5;background-color:#c5aeff;position:relative;z-index:1}.ai-drawer-header .ai-drawer-title{font-size:18px;color:#000;text-align:center}.ai-drawer-header .ai-drawer-title-highlight{font-weight:700}.ai-drawer-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.ai-chat-container{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:.9375rem 1.5625rem}.ai-chat-container::-webkit-scrollbar{width:6px}.ai-chat-container::-webkit-scrollbar-track{background:#F1F2F5}.ai-chat-container::-webkit-scrollbar-thumb{background:#C3CBDC;border-radius:3px}.ai-chat-container::-webkit-scrollbar-thumb:hover{background:#5B6D80}.ai-message-list{display:flex;flex-direction:column;gap:.9375rem}.ai-message-wrapper{display:flex;flex-direction:column}.ai-message-wrapper[data-message-type=user]{align-items:flex-end}.ai-message-wrapper[data-message-type=ai],.ai-message-wrapper[data-message-type=system],.ai-message-wrapper.ai-loading-message{align-items:flex-start}.ai-message-timestamp-container{margin-bottom:.625rem;text-align:center;width:100%;align-self:center}.ai-message-timestamp-container .ai-message-timestamp{font-size:.75rem;color:#82919f;font-weight:500}.ai-message-bubble{max-width:80%;border-radius:12px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;animation:messageSlideIn .3s ease-out;display:flex;gap:.625rem}.ai-message-bubble.user-message{background-color:#2b8ff3;color:#fff;border-bottom-right-radius:4px;padding:.625rem .9375rem;justify-content:flex-end}.ai-message-bubble.user-message .ai-message-content-wrapper{display:flex;flex-direction:column;align-items:flex-end}.ai-message-bubble.ai-message{background-color:#fff;border:1px solid #D2D8E5;color:#08203e;border-bottom-left-radius:4px;padding:.625rem .9375rem;align-items:flex-start}.ai-message-bubble.ai-message .ai-message-icon{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;margin-top:2px;background:linear-gradient(90deg,#a21aff,#351cc1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.ai-message-bubble.ai-message .ai-message-icon symphony-icon{font-size:.875rem}.ai-message-bubble.ai-message .ai-message-content-wrapper{flex:1;display:flex;flex-direction:column}.ai-message-bubble.system-message{background-color:#f1f2f5;border:1px solid #E4E7EF;color:#5b6d80;border-radius:8px;text-align:center;max-width:90%;padding:.625rem .9375rem;justify-content:center}.ai-message-bubble.system-message .ai-message-content{font-size:.875rem}@media (max-width: 768px){.ai-message-bubble{max-width:90%}}.ai-message-status{margin-top:.3rem;text-align:right}.ai-message-status .ai-status-text{display:inline-flex;gap:4px;font-size:.75rem;font-weight:500}.ai-message-status .ai-status-text.status-delivered{color:#5b6d80}.ai-message-status .ai-status-text.status-delivered .ai-status-icon{color:#2cb45f;font-size:12px}.ai-message-status .ai-status-text.status-pending{color:#5b6d80}.ai-message-status .ai-status-text.status-pending .ai-status-loader{width:12px;height:12px}.ai-message-status .ai-status-text.status-error{color:#ac4463}.ai-message-status .ai-status-text.status-error .ai-status-icon{color:#ac4463;font-size:12px}.ai-loading-message .ai-message-bubble .ai-message-icon{flex:0 0 auto;width:24px;height:24px;background-color:#f0f8ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:2px}.ai-loading-message .ai-message-bubble .ai-message-icon symphony-icon{color:#2b8ff3;font-size:.875rem}.ai-loading-message .ai-message-bubble .ai-loading-content{display:flex;align-items:center;gap:.625rem;flex:1}.ai-loading-message .ai-message-bubble .ai-loading-text{font-style:italic;color:#5b6d80;font-size:.875rem}.ai-suggested-prompts-section{border-top:1px solid #E4E7EF;background-color:#f1f2f5;margin-bottom:0;position:relative;min-height:48px}.ai-prompts-intro-row{position:relative;padding:12px 14px 0;display:flex;align-items:center}.ai-prompts-intro-row .ai-prompts-intro{margin:0 auto;padding:0;font-size:.875rem;color:#5b6d80;line-height:1.4;text-align:center;position:relative;max-width:calc(100% - 60px);display:block}.ai-prompts-intro-row .ai-suggestions-toggle-compact{right:8px;width:28px;height:28px;border-radius:50%;border:none;background:#fff;color:#712ace;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s;box-shadow:0 1px 4px rgba(80,0,120,.04);font-size:15px;padding:0;margin:0}.ai-prompts-intro-row .ai-suggestions-toggle-compact:hover:not(:disabled){background:#f3f0ff;color:#5a21a4}.ai-prompts-intro-row .ai-suggestions-toggle-compact:focus{outline:2px solid #814DFF;outline-offset:2px}.ai-prompts-intro-row .ai-suggestions-toggle-compact:disabled{opacity:.5;cursor:not-allowed}.ai-prompts-intro-row .ai-suggestions-toggle-compact symphony-icon{font-size:15px;transition:transform .2s;transform:rotate(0)}.ai-prompts-intro-row .ai-suggestions-toggle-compact.suggestions-open symphony-icon{transform:rotate(180deg)}.ai-suggested-prompts{position:static;max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1);opacity:0;padding:1.25rem 1.5625rem;background-color:#f1f2f5}.ai-suggested-prompts.open{max-height:500px;opacity:1}.ai-suggested-prompts.disabled{opacity:.7;pointer-events:none}.ai-suggested-prompts .ai-prompt-button:disabled{cursor:not-allowed;opacity:.7}.ai-suggested-prompts .ai-prompts-intro{font-size:.875rem;color:#5b6d80;text-align:center;line-height:1.4}.ai-suggested-prompts .ai-prompts-list{display:flex;flex-direction:column;gap:.625rem}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button{display:flex;align-items:center;gap:.625rem;padding:.625rem .9375rem;border:1px solid #C5AEFF;border-radius:24px;background-color:transparent;color:#712ace;cursor:pointer;transition:all .2s ease;text-align:left;font-size:.875rem;min-height:48px}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:hover{background-color:#f3f0ff;border-color:#9d79ff;transform:translateY(-1px)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button:active{transform:translateY(0)}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-icon{flex:0 0 auto;color:#712ace;font-size:16px;display:flex}.ai-suggested-prompts .ai-prompts-list .ai-prompt-button .ai-prompt-text{flex:1;font-weight:400;line-height:1.3}.ai-drawer-footer{padding:.9375rem 1.5625rem 1.25rem;border-top:1px solid #D2D8E5;background-color:#fff;position:relative;z-index:1}.ai-suggested-prompts-section+.ai-drawer-footer{padding-top:.3rem;padding-bottom:.9375rem}.ai-input-row symphony-input-textarea-with-send{width:100%}.ai-footer-actions{text-align:center}.ai-footer-actions symphony-button-v2{font-size:.75rem;color:#5b6d80}.ai-footer-actions symphony-button-v2:hover{color:#08203e}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.ai-drawer-container{border:2px solid #08203E}.ai-message-bubble.user-message{border:1px solid #0a5cae}.ai-message-bubble.ai-message{border:2px solid #5B6D80}.ai-message-bubble.system-message{border:2px solid #C3CBDC}}@media (prefers-reduced-motion: reduce){.ai-drawer-container,.ai-message-bubble,.ai-drawer-edge-toggle{transition:none;animation:none}}\n"] }]
|
|
7918
7920
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { model: [{
|
|
7919
7921
|
type: Input
|
|
7920
7922
|
}], config: [{
|