@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-assistant/xplor-assistant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-assistant.js","sourceRoot":"","sources":["../../../src/components/xplor-assistant/xplor-assistant.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Method, Element, Watch } from '@stencil/core';\nimport {\n  AssistantMessage as MessageType,\n  AssistantMessageSentEvent,\n  AssistantMessageReceivedEvent,\n  AssistantErrorEvent,\n  AssistantSessionEvent,\n} from './internal/types';\nimport { sendMessageToAPI, generateSessionId } from './utils/api';\nimport { SpeechRecognitionManager, SpeechSynthesisManager, detectBrowserCapabilities } from './utils/speech';\nimport { AssistantMessage } from './internal/AssistantMessage';\nimport { AssistantInput } from './internal/AssistantInput';\nimport { QuickReplies } from './internal/QuickReplies';\nimport { TypingIndicator } from './internal/TypingIndicator';\n\n@Component({\n  tag: 'xplor-assistant',\n  styleUrl: 'xplor-assistant.scss',\n  scoped: true,\n})\nexport class XplorAssistant {\n  @Element() el: HTMLElement;\n\n  // Required Props\n  @Prop() apiEndpoint!: string;\n  @Prop() userId!: string;\n  @Prop() userEmail!: string;\n  @Prop() userName!: string;\n\n  // Optional Props\n  @Prop() sessionId?: string;\n  @Prop() quickReplies?: string[];\n  @Prop() placeholder: string = 'Type your message...';\n  @Prop() enableVoiceInput: boolean = true;\n  @Prop() enableTextToSpeech: boolean = true;\n  @Prop() autoSpeak: boolean = false;\n  @Prop() maxHeight: string = '600px';\n  @Prop() disabled: boolean = false;\n\n  // State\n  @State() messages: MessageType[] = [];\n  @State() internalSessionId: string = '';\n  @State() isLoading: boolean = false;\n  @State() isListening: boolean = false;\n  @State() isSpeaking: boolean = false;\n  @State() error: string = '';\n  @State() inputValue: string = '';\n  @State() hasVoiceSupport: boolean = false;\n  @State() hasTTSSupport: boolean = false;\n\n  // Events\n  @Event() assistantMessageSent: EventEmitter<AssistantMessageSentEvent>;\n  @Event() assistantMessageReceived: EventEmitter<AssistantMessageReceivedEvent>;\n  @Event() assistantError: EventEmitter<AssistantErrorEvent>;\n  @Event() assistantSessionCreated: EventEmitter<AssistantSessionEvent>;\n\n  // Private members\n  private speechRecognition: SpeechRecognitionManager;\n  private speechSynthesis: SpeechSynthesisManager;\n  private messagesContainerRef: HTMLDivElement;\n\n  componentWillLoad() {\n    // Validate required props\n    if (!this.apiEndpoint) {\n      console.error('xplor-assistant: apiEndpoint prop is required');\n      this.error = 'Configuration error: API endpoint not provided';\n      return;\n    }\n\n    if (!this.userId || !this.userEmail || !this.userName) {\n      console.error('xplor-assistant: userId, userEmail, and userName props are required');\n      this.error = 'Configuration error: User information not provided';\n      return;\n    }\n\n    // Initialize session\n    if (this.sessionId) {\n      this.internalSessionId = this.sessionId;\n    } else {\n      this.internalSessionId = generateSessionId();\n      this.assistantSessionCreated.emit({\n        sessionId: this.internalSessionId,\n        timestamp: new Date(),\n      });\n    }\n\n    // Detect browser capabilities\n    const capabilities = detectBrowserCapabilities();\n    this.hasVoiceSupport = capabilities.voiceInput;\n    this.hasTTSSupport = capabilities.textToSpeech;\n\n    // Disable features if not supported\n    if (!this.hasVoiceSupport) {\n      this.enableVoiceInput = false;\n    }\n    if (!this.hasTTSSupport) {\n      this.enableTextToSpeech = false;\n    }\n\n    // Initialize speech managers\n    this.speechRecognition = new SpeechRecognitionManager();\n    this.speechSynthesis = new SpeechSynthesisManager();\n\n    // Setup speech recognition callbacks\n    this.speechRecognition.onStart(() => {\n      this.isListening = true;\n    });\n\n    this.speechRecognition.onEnd(() => {\n      this.isListening = false;\n    });\n\n    this.speechRecognition.onResult((transcript) => {\n      this.handleVoiceInput(transcript);\n    });\n\n    this.speechRecognition.onError((error) => {\n      this.isListening = false;\n      this.handleError(error, 'voice');\n    });\n\n    // Setup speech synthesis callbacks\n    this.speechSynthesis.onStart(() => {\n      this.isSpeaking = true;\n    });\n\n    this.speechSynthesis.onEnd(() => {\n      this.isSpeaking = false;\n    });\n  }\n\n  @Watch('sessionId')\n  handleSessionIdChange(newSessionId: string) {\n    if (newSessionId && newSessionId !== this.internalSessionId) {\n      this.internalSessionId = newSessionId;\n    }\n  }\n\n  componentDidUpdate() {\n    // Auto-scroll to bottom when new messages arrive\n    this.scrollToBottom();\n  }\n\n  disconnectedCallback() {\n    // Cleanup speech synthesis\n    if (this.speechSynthesis) {\n      this.speechSynthesis.stop();\n    }\n  }\n\n  // Public Methods\n\n  @Method()\n  async sendMessage(message: string): Promise<void> {\n    if (!message || !message.trim()) {\n      return;\n    }\n    await this.handleSendMessage(message);\n  }\n\n  @Method()\n  async clearHistory(): Promise<void> {\n    this.messages = [];\n    this.error = '';\n  }\n\n  @Method()\n  async speak(text: string): Promise<void> {\n    if (this.enableTextToSpeech && this.speechSynthesis) {\n      this.speechSynthesis.speak(text);\n    }\n  }\n\n  @Method()\n  async stopSpeaking(): Promise<void> {\n    if (this.speechSynthesis) {\n      this.speechSynthesis.stop();\n    }\n  }\n\n  // Private Methods\n\n  private scrollToBottom() {\n    if (this.messagesContainerRef) {\n      setTimeout(() => {\n        this.messagesContainerRef.scrollTop = this.messagesContainerRef.scrollHeight;\n      }, 100);\n    }\n  }\n\n  private handleSendMessage = async (messageText: string) => {\n    console.log('[XplorAssistant] handleSendMessage called with:', messageText);\n\n    if (this.disabled || this.isLoading || !messageText.trim()) {\n      console.log('[XplorAssistant] Message blocked - disabled:', this.disabled, 'isLoading:', this.isLoading, 'hasValue:', !!messageText.trim());\n      return;\n    }\n\n    // Clear the input immediately\n    this.inputValue = '';\n    console.log('[XplorAssistant] Input cleared, proceeding with message');\n\n    const userMessage: MessageType = {\n      id: `user-${Date.now()}`,\n      role: 'user',\n      content: messageText.trim(),\n      timestamp: new Date(),\n    };\n\n    // Add user message to the conversation\n    this.messages = [...this.messages, userMessage];\n    this.error = '';\n    this.isLoading = true;\n\n    // Emit message sent event\n    this.assistantMessageSent.emit({\n      message: userMessage.content,\n      sessionId: this.internalSessionId,\n      timestamp: userMessage.timestamp,\n    });\n\n    try {\n      // Call the API\n      const response = await sendMessageToAPI(\n        this.apiEndpoint,\n        userMessage.content,\n        this.internalSessionId,\n        this.userId,\n        this.userEmail,\n        this.userName\n      );\n\n      // Update session ID if changed\n      if (response.sessionId && response.sessionId !== this.internalSessionId) {\n        this.internalSessionId = response.sessionId;\n      }\n\n      // Add assistant response to conversation\n      const assistantMessage: MessageType = {\n        id: `assistant-${Date.now()}`,\n        role: 'assistant',\n        content: response.message,\n        timestamp: new Date(),\n      };\n\n      this.messages = [...this.messages, assistantMessage];\n\n      // Emit message received event\n      this.assistantMessageReceived.emit({\n        message: assistantMessage.content,\n        sessionId: this.internalSessionId,\n        timestamp: assistantMessage.timestamp,\n      });\n\n      // Auto-speak if enabled\n      if (this.autoSpeak && this.enableTextToSpeech) {\n        this.speechSynthesis.speak(assistantMessage.content);\n      }\n    } catch (error) {\n      const errorMessage = error instanceof Error ? error.message : 'Failed to send message';\n      this.handleError(errorMessage, 'api');\n    } finally {\n      this.isLoading = false;\n    }\n  };\n\n  private handleVoiceInput = (transcript: string) => {\n    if (transcript && transcript.trim()) {\n      this.handleSendMessage(transcript);\n    }\n  };\n\n  private handleError = (error: string, type: 'api' | 'voice' | 'tts' | 'network' | 'validation') => {\n    this.error = error;\n    this.assistantError.emit({\n      error,\n      type,\n      timestamp: new Date(),\n    });\n  };\n\n  private handleStartListening = () => {\n    if (this.speechRecognition && this.enableVoiceInput && !this.disabled && !this.isLoading) {\n      this.speechRecognition.start();\n    }\n  };\n\n  private handleStopListening = () => {\n    if (this.speechRecognition) {\n      this.speechRecognition.stop();\n    }\n  };\n\n  private handleSpeak = (text: string) => {\n    if (this.speechSynthesis && this.enableTextToSpeech) {\n      this.speechSynthesis.speak(text);\n    }\n  };\n\n  private handleStopSpeaking = () => {\n    if (this.speechSynthesis) {\n      this.speechSynthesis.stop();\n    }\n  };\n\n  private handleQuickReply = (reply: string) => {\n    this.handleSendMessage(reply);\n  };\n\n  private setInputValue = (value: string) => {\n    this.inputValue = value;\n  };\n\n  render() {\n    // Show error state if critical error\n    if (this.error && !this.apiEndpoint) {\n      return (\n        <Host>\n          <div class=\"xplor-assistant xplor-assistant--error\">\n            <div class=\"xplor-assistant__error-message\">\n              {this.error}\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div\n          class={{\n            'xplor-assistant': true,\n            'xplor-assistant--disabled': this.disabled,\n          }}\n          style={{ maxHeight: this.maxHeight }}\n        >\n          {/* Messages Area */}\n          <div\n            class=\"xplor-assistant__messages\"\n            ref={(el) => (this.messagesContainerRef = el)}\n          >\n            {this.messages.map((message) => (\n              <AssistantMessage\n                message={message}\n                enableTextToSpeech={this.enableTextToSpeech}\n                autoSpeak={false}\n                isSpeaking={this.isSpeaking}\n                onSpeak={this.handleSpeak}\n                onStopSpeaking={this.handleStopSpeaking}\n              />\n            ))}\n\n            {/* Loading Indicator */}\n            {this.isLoading && (\n              <div class=\"xplor-assistant__message xplor-assistant__message--assistant\">\n                <TypingIndicator />\n              </div>\n            )}\n\n            {/* Error Message */}\n            {this.error && this.apiEndpoint && (\n              <div class=\"xplor-assistant__error-banner\">\n                {this.error}\n              </div>\n            )}\n          </div>\n\n          {/* Quick Replies */}\n          {this.quickReplies && this.quickReplies.length > 0 && (\n            <QuickReplies\n              replies={this.quickReplies}\n              disabled={this.disabled || this.isLoading}\n              onReplyClick={this.handleQuickReply}\n            />\n          )}\n\n          {/* Input Area */}\n          <AssistantInput\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            isLoading={this.isLoading}\n            enableVoiceInput={this.enableVoiceInput && this.hasVoiceSupport}\n            isListening={this.isListening}\n            onSendMessage={this.handleSendMessage}\n            onStartListening={this.handleStartListening}\n            onStopListening={this.handleStopListening}\n            inputValue={this.inputValue}\n            setInputValue={this.setInputValue}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xplor-autocomplete/xplor-autocomplete.css

@@ -0,0 +1,458 @@
+/* on mobile browsers, I set a width of 100% */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  /* html[data-theme='office'] {
+    --color-primary: rgb(219, 59, 3);
+    --color-secondary: rgb(0, 119, 107);
+    --color-buttons: #89da59;
+    --color-typography: #ff320e;
+  }
+
+  html {
+    --color-primary: #db3b03;
+    --color-primary-50: #db3b03;
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgb(0, 119, 107);
+    --color-tertiary: rgb(128, 104, 186);
+  } */
+  :root {
+    --color-primary: #db3b03;
+    --color-primary-50: rgba(255, 152, 0, 1);
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgba(1, 163, 157, 1);
+    --color-tertiary: rgb(128, 104, 186);
+    --color-tertiary: rgb(223, 242, 241);
+    --color-white: white;
+    --color-emphasis: rgb(8, 8, 9);
+    --color-supergiant: rgb(213, 66, 99);
+    --color-orange: rgb(250, 200, 127);
+    --color-buttons: #fbbc05;
+    --color-typography: #ea4335;
+    --background: 20 66% 99%;
+    --foreground: 20 51% 4%;
+    --muted: 20 25% 86%;
+    --muted-foreground: 20 7% 25%;
+    --popover: 20 66% 98%;
+    --popover-foreground: 20 51% 3%;
+    --card: 20 66% 98%;
+    --card-foreground: 20 51% 3%;
+    --border: 20 15% 94%;
+    --input: 20 15% 94%;
+    --primary: 20 48% 72%;
+    --primary-foreground: 20 48% 12%;
+    --secondary: 20 12% 92%;
+    --secondary-foreground: 20 12% 32%;
+    --accent: 20 12% 92%;
+    --accent-foreground: 20 12% 32%;
+    --destructive: 11 80% 22%;
+    --destructive-foreground: 11 80% 82%;
+    --ring: 20 48% 72%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+  .dark {
+    --background: 253 43% 3%;
+    --foreground: 253 31% 98%;
+    --muted: 253 7% 13%;
+    --muted-foreground: 253 13% 63%;
+    --popover: 253 43% 3%;
+    --popover-foreground: 253 31% 98%;
+    --card: 253 43% 4%;
+    --card-foreground: 253 31% 99%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --primary: 253 91% 58%;
+    --primary-foreground: 253 91% 98%;
+    --secondary: 253 7% 9%;
+    --secondary-foreground: 253 7% 69%;
+    --accent: 253 13% 14%;
+    --accent-foreground: 253 13% 74%;
+    --destructive: 339.2 90.36% 51.18%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 253 91% 58%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply box-border bg-background text-foreground;
+  }
+}
+@layer utilities {
+  .min-h-screen {
+    min-height: 100vh;
+    /* Fallback */
+    min-height: 100dvh;
+  }
+  .h-screen {
+    height: 100vh;
+    /* Fallback */
+    height: 100dvh;
+  }
+}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer components {
+  .glass {
+    border: none;
+    backdrop-filter: blur(var(--glass-blur, 40px));
+    background-color: transparent;
+    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);
+    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);
+    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));
+  }
+}
+.tox.tox-tinymce {
+  width: 50% !important;
+  height: 400px !important;
+  display: inline-flex;
+}
+
+/* on large screens, I use a different layout, so 600px are sufficient */
+@media only screen and (min-width: 600px) {
+  .tox.tox-tinymce {
+    width: 600px !important;
+  }
+}
+h1 {
+  color: var(--color-primary);
+  /* Header/H1 */
+  font-family: Inter;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 56px; /* 116.667% */
+}
+
+h2 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H2 Bold */
+  font-family: Inter;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 38px; /* 118.75% */
+  letter-spacing: 0.25px;
+}
+
+h3 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H3 */
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px; /* 133.333% */
+}
+
+.overline {
+  color: var(--grey-1100252525, #252525);
+  /* Overline/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 3.2px;
+  text-transform: uppercase;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 1rem;
+  padding: 0;
+}
+ol li,
+ul li {
+  margin: 1rem;
+  padding: 0;
+}
+ol.mdc-list,
+ul.mdc-list {
+  list-style-type: none;
+  list-style: none;
+}
+ol.mdc-list li.mdc-list-item,
+ul.mdc-list li.mdc-list-item {
+  list-style-type: none;
+  list-style: none !important;
+}
+
+.orange-label {
+  color: var(--Orange-900-Primary, #db3b03);
+  /* Caption 1/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 0.4px;
+  margin: 0px 0 -9px 16px;
+  z-index: 1 !important;
+  position: relative;
+  width: fit-content;
+}
+.orange-label.grey-bg {
+  background-color: #fefcfb;
+}
+
+#spinnerLoader {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  pointer-events: none;
+}
+
+#textfield-Title-label {
+  background-color: white;
+}
+
+.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 1px solid #db3b03 !important;
+  padding: 0;
+  height: 0;
+}
+
+.mdc-text-field--focused .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 2px solid #db3b03 !important;
+}
+
+.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
+  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);
+  border-top: transparent;
+}
+
+.generate-btn {
+  display: flex;
+  height: 48px;
+  padding: 12px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 16px;
+}
+.generate-btn.link:hover {
+  background-color: var(--Cyan-700-Secondary, #e27046);
+  color: var(--Cyan-700-Secondary-Text, #fff);
+}
+
+.bg-green {
+  background: var(--Cyan-700-Secondary, #00776b);
+}
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.autocomplete {
+  position: relative;
+  width: 100%;
+}
+.autocomplete--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.autocomplete--readonly .autocomplete__input {
+  background-color: #f5f5f5;
+}
+
+.autocomplete__label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #424242;
+  margin-bottom: 0.5rem;
+}
+
+.autocomplete__input-wrapper {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid #bdbdbd;
+  border-radius: 4px;
+  padding: 0.5rem;
+  background-color: #fff;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.autocomplete__input-wrapper:focus-within {
+  border-color: #1976d2;
+  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
+}
+
+.autocomplete__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.autocomplete__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  background-color: #e3f2fd;
+  border-radius: 16px;
+  font-size: 0.875rem;
+  color: #1976d2;
+}
+
+.autocomplete__chip-label {
+  line-height: 1;
+}
+
+.autocomplete__chip-remove {
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  width: 1rem;
+  height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #1976d2;
+  border-radius: 50%;
+  transition: background-color 0.2s;
+}
+.autocomplete__chip-remove:hover:not(:disabled) {
+  background-color: rgba(25, 118, 210, 0.1);
+}
+.autocomplete__chip-remove:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.autocomplete__input {
+  flex: 1;
+  min-width: 120px;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  font-size: 1rem;
+  padding: 0.25rem;
+  background: transparent;
+  color: #212121;
+}
+.autocomplete__input::placeholder {
+  color: #9e9e9e;
+}
+.autocomplete__input:disabled {
+  cursor: not-allowed;
+}
+.autocomplete__input[readonly] {
+  cursor: default;
+}
+
+.autocomplete__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+.autocomplete__clear {
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #757575;
+  border-radius: 50%;
+  transition: background-color 0.2s;
+}
+.autocomplete__clear:hover {
+  background-color: #f5f5f5;
+  color: #212121;
+}
+
+.autocomplete__icon {
+  font-size: 0.75rem;
+  color: #757575;
+  pointer-events: none;
+  transition: transform 0.2s;
+}
+.autocomplete--open .autocomplete__icon {
+  transform: rotate(180deg);
+}
+
+.autocomplete__dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  max-height: 300px;
+  overflow-y: auto;
+  background-color: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+.autocomplete__item {
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  color: #212121;
+}
+.autocomplete__item:hover:not(.autocomplete__item--disabled) {
+  background-color: #f5f5f5;
+}
+.autocomplete__item--highlighted {
+  background-color: #e3f2fd;
+}
+.autocomplete__item--selected {
+  background-color: #1976d2;
+  color: #fff;
+}
+.autocomplete__item--selected:hover {
+  background-color: #1565c0;
+}
+.autocomplete__item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.autocomplete__no-results {
+  padding: 1rem;
+  text-align: center;
+  color: #757575;
+  font-size: 0.875rem;
+}