sg-paisou 0.0.0

package/src/components/AIChatSDK/style.scss

@@ -0,0 +1,432 @@
+.ai-chat-container {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  
+    .ai-avatar {
+      flex-shrink: 0;
+  
+      img {
+        object-fit: cover;
+      }
+    }
+  
+    .ai-info {
+      flex: 1;
+    }
+  
+    .chat-content {
+      background: white;
+  
+      .chat-messages {
+        flex: 1;
+        overflow-y: auto;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+  
+        .message {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+  
+          .message-wrapper {
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+            width: 80%;
+          }
+  
+          .user-message-wrapper {
+            align-self: flex-end;
+            margin-left: auto;
+            justify-content: flex-end;
+          }
+  
+          .message-avatar {
+            flex-shrink: 0;
+  
+            img {
+              object-fit: cover;
+              display: block;
+            }
+          }
+  
+          .message-content {
+            font-size: 16px;
+              line-height: 24px;
+              max-width: calc(100% - 60px);
+  
+              /* 文字和呼吸灯的包裹容器 */
+              .message-text-wrapper {
+                display: inline;
+  
+                /* 呼吸灯样式 - 紧跟在文字后面 */
+                .typing-indicator {
+                  display: inline-block;
+                  width: 8px;
+                  height: 8px;
+                  margin-left: 4px;
+                  background-color: #FF9D00;
+                  border-radius: 50%;
+                  animation: breathing 1.5s ease-in-out infinite;
+                  vertical-align: middle;
+                }
+              }
+  
+              /* 消息图片样式 */
+              .message-image {
+                margin-bottom: 8px;
+                border-radius: 12px;
+                overflow: hidden;
+                max-width: 100%;
+  
+                img {
+                  width: 100%;
+                  height: auto;
+                  display: block;
+                }
+              }
+  
+              /* 消息按钮样式 */
+              .message-buttons {
+                display: flex;
+                gap: 20px;
+                margin-top: 16px;
+                justify-content: flex-end;
+  
+                button {
+                  padding: 8px 16px;
+                  border: none;
+                  border-radius: 70px;
+                  font-weight: 500;
+                  line-height: 24px;
+                  font-size: 16px;
+                  background: transparent;
+                }
+  
+                .btn-primary {
+                  background: linear-gradient(91.95deg, #FFCB00 0%, #FFAB03 100%);
+                  color: #FFFFFF;
+  
+                  &:hover {
+                    transform: translateY(-1px);
+                    box-shadow: 0 4px 12px rgba(255, 171, 3, 0.3);
+                  }
+  
+                  &:active {
+                    transform: translateY(0);
+                  }
+                }
+  
+                .btn-secondary {
+                  color: #999999;
+  
+                  &:hover {
+                    color: #666666;
+                  }
+                }
+              }
+  
+              /* 只显示反馈按钮（追问后的回复） */
+              .feedback-actions-only {
+                display: flex;
+                gap: 20px;
+                margin-top: 16px;
+  
+                img {
+                  width: 20px;
+  
+                }
+              }
+  
+              /* 反馈按钮和 Continue 按钮容器 */
+              .feedback-and-continue {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-top: 16px;
+                gap: 16px;
+  
+                .feedback-actions {
+                  display: flex;
+                  gap: 16px;
+  
+                  img {
+                    width: 20px;
+                  }
+                }
+  
+                .btn-continue {
+                  padding: 8px 16px;
+                  border: none;
+                  border-radius: 70px;
+                  font-weight: 500;
+                  line-height: 24px;
+                  font-size: 16px;
+                  background: #FF9D001A;
+                  color: #FF9D00;
+                  white-space: nowrap;
+                  letter-spacing: 1px;
+                }
+              }
+  
+              /* 呼吸灯动画 */
+              @keyframes breathing {
+                0%, 100% {
+                  opacity: 1;
+                  transform: scale(1);
+                }
+                50% {
+                  opacity: 0.3;
+                  transform: scale(0.8);
+                }
+              }
+  
+              /* 流式数据接收时的呼吸灯（更快的闪烁） */
+              @keyframes blinking {
+                0%, 100% {
+                  opacity: 1;
+                }
+                50% {
+                  opacity: 0.2;
+                }
+              }
+          }
+  
+          /* 讲题完成区域样式 */
+          .completion-section {
+            margin-top: 12px;
+            width: 100%;
+  
+            .helpful-section {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              gap: 12px;
+              padding-bottom: 12px;
+  
+              .helpful-text {
+                color: #666666;
+              }
+  
+              img {
+                width: 24px;
+              }
+            }
+  
+            .follow-up-questions {
+              display: flex;
+              flex-direction: column;
+              gap: 12px;
+  
+              .follow-up-item {
+                width: max-content;
+                display: flex;
+                align-items: flex-start;
+                gap: 8px;
+                padding: 7px 12px;
+                background: #FFFFFF;
+                border-radius: 70px;
+                border: 1px solid #EEEEEE;
+  
+                img {
+                  width: 20px;
+                }
+  
+                .question-text {
+                  color: #222222;
+                  line-height: 24px;
+                }
+  
+              }
+            }
+  
+            .btn-snap-another {
+              width: max-content;
+              margin-top: 12px;
+              padding: 8px 16px;
+              border: none;
+              border-radius: 70px;
+              font-weight: 500;
+              line-height: 24px;
+              font-size: 16px;
+              background: #FF9D001A;
+              color: #FF9D00;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              gap: 8px;
+  
+              img {
+                width: 20px;
+              }
+            }
+          }
+        }
+  
+        .message:last-child {
+          margin-bottom: 0 !important;
+        }
+      }
+    }
+  
+    .feedback-buttons {
+      display: flex;
+      gap: 12px;
+  
+      .feedback-btn {
+        padding: 6px 12px 6px 8px;
+        border: none;
+        background: #00000008;
+        border-radius: 38px;
+        font-size: 14px;
+        color: #222222;
+        display: flex;
+        align-items: center;
+        transition: all 0.2s;
+      }
+    }
+  
+    .input-wrapper {
+      background: white;
+  
+      .chat-input::placeholder {
+        color: #adb5bd;
+      }
+  
+      .send-button.disabled {
+        opacity: 0.5;
+      }
+    }
+  }
+  
+  .ai-message {
+    align-items: flex-start;
+  }
+  
+  .user-message {
+    align-items: flex-end;
+  }
+  
+  .options {
+    margin-top: 8px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  
+  .options span {
+    padding: 4px 8px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 6px;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+  }
+  
+  
+  
+  /* LaTeX样式 */
+  :deep(.katex) {
+    font-size: 1em;
+  }
+  
+  :deep(.katex-display) {
+    margin: 0.5em 0;
+  }
+  
+  .background-transparent {
+    background: transparent !important;
+  }
+  
+  /* 禁用状态样式 */
+  .chat-input:disabled {
+    background-color: #F5F5F5;
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  
+  .feedback-buttons.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  
+    button {
+      cursor: not-allowed;
+    }
+  }
+  
+  /* 长按反馈弹窗遮罩 */
+  .feedback-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: transparent;
+    z-index: 999;
+  }
+  
+  /* 长按反馈弹窗 */
+  .message-feedback-popup {
+    position: fixed;
+    z-index: 1000;
+  
+    .popup-arrow {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: 0;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+    }
+  
+    .popup-buttons {
+      display: flex;
+      gap: 20px;
+      padding: 8px;
+      background: #FFFFFF;
+      border-radius: 12px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+      padding: 12px;
+    }
+  
+    /* 显示在下方时，三角在上方 */
+    &:not(.show-above) {
+      .popup-arrow {
+        top: 0;
+        border-bottom: 8px solid #FFFFFF;
+        filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.05));
+      }
+  
+      .popup-buttons {
+        margin-top: 8px;
+      }
+    }
+  
+    /* 显示在上方时，三角在下方 */
+    &.show-above {
+      .popup-arrow {
+        bottom: 0;
+        border-top: 8px solid #FFFFFF;
+        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.05));
+      }
+  
+      .popup-buttons {
+        margin-bottom: 8px;
+      }
+    }
+
+    .helpful-section img,
+    .feedback-actions img,
+    .feedback-actions-only img,
+    .popup-buttons img {
+      transition: transform 0.1s ease;
+    }
+  
+    .helpful-section img:active,
+    .feedback-actions img:active,
+    .feedback-actions-only img:active,
+    .popup-buttons img:active {
+      transform: scale(1.2);
+    }
+  }

package/src/components/AIChatSDK/types.ts

@@ -0,0 +1,275 @@
+// AI聊天SDK的类型定义
+
+export interface IAvatarConfig {
+  src?: string;
+  alt?: string;
+  width?: string;
+  height?: string;
+  borderRadius?: string;
+}
+
+export interface IAIInfoConfig {
+  name?: string;
+  title?: string;
+  nameStyle?: Partial<CSSStyleDeclaration>;
+  titleStyle?: Partial<CSSStyleDeclaration>;
+}
+
+export interface IMuteButtonConfig {
+  soundOnIcon?: string;
+  soundOffIcon?: string;
+  width?: string;
+  height?: string;
+  onClick?: (isSoundOn: boolean) => void;
+}
+
+export interface IFeedbackButton {
+  id: string;
+  text: string;
+  icon?: string;
+  style?: Partial<CSSStyleDeclaration>;
+  onClick?: (id: string) => void;
+}
+
+export interface IFeedbackConfig {
+  buttons?: IFeedbackButton[];
+  containerStyle?: Partial<CSSStyleDeclaration>;
+  show?: boolean;
+}
+
+export interface IMessage {
+  id: string;
+  type: 'ai' | 'user';
+  content: string;
+  timestamp?: number;
+  options?: string[];
+  imageUrl?: string;  // 消息中的图片URL
+  showButtons?: boolean;  // 是否显示操作按钮（Not my question / Start Explaining）
+  isTyping?: boolean;  // 是否正在打字
+  isStreaming?: boolean;  // 是否正在接收流式数据
+  isThinking?: boolean;  // 是否正在思考（显示占位文本）
+  showFeedbackAndContinue?: boolean;  // 是否显示反馈按钮和 Continue 按钮
+  showCompletionSection?: boolean;  // 是否显示讲题完成区域（Was this helpful + 追问 + Snap another one）
+  followUpQuestions?: string[];  // 追问问题列表
+  showFeedbackOnly?: boolean;  // 是否只显示反馈按钮（不显示Continue）
+  vote?: 'upvote' | 'downvote';  // 用户投票状态
+  isDownvote?: number;  // 是否不喜欢
+  disableLongPress?: boolean;  // 是否禁用长按弹框功能
+  isPlayingTTS?: boolean;  // 是否正在播放TTS
+}
+
+export interface IMessageStyle {
+  aiMessage?: {
+    background?: string;
+    color?: string;
+    borderRadius?: string;
+    padding?: string;
+    maxWidth?: string;
+    border?: string;
+  };
+  userMessage?: {
+    background?: string;
+    color?: string;
+    borderRadius?: string;
+    padding?: string;
+    maxWidth?: string;
+  };
+  messageGap?: string;
+}
+
+export interface IInputConfig {
+  placeholder?: string;
+  sendIcon?: string;
+  sendIconWidth?: string;
+  sendIconHeight?: string;
+  borderRadius?: string;
+  padding?: string;
+  boxShadow?: string;
+  onSend?: (message: string) => void;
+}
+
+export interface IStyleConfig {
+  container?: Partial<CSSStyleDeclaration>;
+  header?: Partial<CSSStyleDeclaration>;
+  chatContent?: Partial<CSSStyleDeclaration>;
+  inputContainer?: Partial<CSSStyleDeclaration>;
+  messages?: IMessageStyle;
+}
+
+export interface IAIChatConfig {
+  // AI头像配置
+  avatar?: IAvatarConfig;
+
+  // 用户头像配置
+  userAvatar?: IAvatarConfig;
+
+  // AI信息配置
+  aiInfo?: IAIInfoConfig;
+
+  // 静音按钮配置
+  muteButton?: IMuteButtonConfig;
+
+  // 反馈按钮配置
+  feedback?: IFeedbackConfig;
+
+  // 输入框配置
+  input?: IInputConfig;
+
+  // 样式配置
+  styles?: IStyleConfig;
+
+
+  // 是否显示LaTeX渲染
+  enableLatex?: boolean;
+
+  // 自定义CSS类名
+  customClasses?: {
+    container?: string;
+    header?: string;
+    chatContent?: string;
+    inputContainer?: string;
+  };
+}
+
+export interface IAIChatSDKProps {
+  config?: IAIChatConfig;
+  onMessageSend?: (message: string) => void;
+  onFeedback?: (feedbackId: string) => void;
+  onMuteToggle?: (isMuted: boolean) => void;
+}
+
+import { IMAGE_ASSETS } from './utils/imageUtils'
+
+// 默认配置
+export const DEFAULT_CONFIG: Required<IAIChatConfig> = {
+  avatar: {
+    src: IMAGE_ASSETS.maskGroup,
+    alt: 'AI Avatar',
+    width: '40px',
+    height: '40px',
+    borderRadius: '50%'
+  },
+  userAvatar: {
+    src: IMAGE_ASSETS.userAvatar,
+    alt: 'User Avatar',
+    width: '40px',
+    height: '40px',
+    borderRadius: '50%'
+  },
+  aiInfo: {
+    name: 'Thinkie',
+    title: 'AI Tutor',
+    nameStyle: {
+      color: '#222222',
+      fontWeight: '600',
+      fontSize: '20px',
+      lineHeight: '150%',
+      margin: '0'
+    },
+    titleStyle: {
+      color: '#999999',
+      fontSize: '14px',
+      lineHeight: '150%',
+      textTransform: 'capitalize',
+      margin: '0'
+    }
+  },
+  muteButton: {
+    soundOnIcon: IMAGE_ASSETS.soundOn,
+    soundOffIcon: IMAGE_ASSETS.soundOff,
+    width: '32px',
+    height: '32px'
+  },
+  feedback: {
+    show: true,
+    buttons: [
+      {
+        id: 'happy',
+        text: 'I got it!',
+        icon: IMAGE_ASSETS.smile
+      },
+      {
+        id: 'confused',
+        text: "I Don't understand",
+        icon: IMAGE_ASSETS.confused
+      },
+      {
+        id: 'good',
+        text: 'Good! Thank you',
+        icon: IMAGE_ASSETS.lightbulb
+      }
+    ],
+    containerStyle: {
+      padding: '0 0 12px 0',
+      display: 'flex',
+      gap: '12px'
+    }
+  },
+  input: {
+    placeholder: 'Start explaining, and feel free to ask Thinkie any questions',
+    sendIcon: IMAGE_ASSETS.voiceTube,
+    sendIconWidth: '32px',
+    sendIconHeight: '32px',
+    borderRadius: '40px',
+    padding: '13px 17px',
+    boxShadow: '0px 0px 12px 0px #0000001A'
+  },
+  styles: {
+    container: {
+      width: 'calc(100% - 424px)',
+      display: 'flex',
+      flexDirection: 'column',
+      flexShrink: '0',
+      background: 'rgba(255, 255, 255, 1)',
+      borderRadius: '20px'
+    },
+    header: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '12px',
+      padding: '12px 20px',
+      borderBottom: '1px solid #e9ecef',
+      flexShrink: '0',
+      position: 'sticky',
+      top: '0',
+      zIndex: '10'
+    },
+    chatContent: {
+      flex: '1',
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden'
+    },
+    inputContainer: {
+      padding: '12px 20px 20px',
+      flexShrink: '0',
+      position: 'sticky',
+      bottom: '0',
+      zIndex: '10'
+    },
+    messages: {
+      aiMessage: {
+        background: '#F8F7F6',
+        color: '#222222',
+        borderRadius: '12px',
+        padding: '12px 16px',
+        maxWidth: '85%',
+      },
+      userMessage: {
+        background: 'linear-gradient(91.95deg, #FFCB00 0%, #FFAB03 100%)',
+        color: 'white',
+        borderRadius: '16px',
+        padding: '12px 16px',
+        maxWidth: '85%'
+      },
+      messageGap: '20px'
+    }
+  },
+  enableLatex: true,
+  customClasses: {
+    container: '',
+    header: '',
+    chatContent: '',
+    inputContainer: ''
+  }
+};