@trtc/calls-uikit-react 4.4.3 → 4.4.5

package/src/Components/components/common/AIAssistant/components/SubtitleContent.scss

@@ -0,0 +1,67 @@
+// Common styles for both PC and H5
+.subtitle-content {
+  position: relative;
+  padding: 10px 12px;
+  color: #fff;
+  background-color: #000000B8;
+  opacity: 0.72;
+  border-radius: 8px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  bottom: 10px;
+  font-size: 12px;
+  
+  /* Hide scrollbar for webkit browsers */
+  &::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
+  
+  /* Hide scrollbar for Firefox */
+  scrollbar-width: none;
+}
+
+// PC specific styles
+.subtitle-content:not(.subtitle-content--h5) {
+  width: 640px;
+  min-width: 640px;
+  height: 180px;
+  max-height: 180px;
+  
+  .subtitle-content__settings-btn {
+    position: fixed;
+    top: 6px;
+    right: 6px;
+    cursor: pointer;
+    z-index: 999;
+  }
+}
+
+// H5 specific styles
+.subtitle-content--h5 {
+  position: relative;
+  width: 350px;
+  min-width: 350px;
+  height: 116px;
+  max-height: 116px;
+  bottom: 24px;
+  
+  .subtitle-content__settings-btn {
+    position: fixed;
+    top: 30%;
+    right: 4px;
+    cursor: pointer;
+    z-index: 999;
+    transform: translateY(-50%);
+  }
+}
+
+.sender-name {
+  font-family: PingFang SC;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0px;
+  color: #FFFFFFBF;
+}

package/src/Components/components/common/AIAssistant/components/SubtitleContent.tsx

@@ -0,0 +1,134 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { TUIGlobal } from '../../../../../TUICallService/index';
+import { useAIAssistant } from '../../../../hooks/useAIAssistant';
+import subtitleSettingsDeskTopIcon from '../../../../assets/aiAssistant/desktop/subtitleSettings.svg';
+import subtitleSettingsH5Icon from '../../../../assets/aiAssistant/mobile/subtitleSettings.svg';
+import './SubtitleContent.scss';
+
+interface SubtitleContentProps {
+  onOpenSettings: () => void;
+  className?: string;
+}
+
+interface ITranslationContent {
+  language: string;
+  text: string;
+}
+
+interface ITranslationInfo {
+  roundId: string;
+  sender: string;
+  nick?: string;
+  text: string;
+  end: boolean;
+  translation: ITranslationContent[];
+}
+
+const SubtitleContent: React.FC<SubtitleContentProps> = ({ onOpenSettings, className }) => {
+  // Internal state management
+  const [showSettingsIcon, setShowSettingsIcon] = useState(false);
+  const subtitleContainerRef = useRef<HTMLDivElement | null>(null);
+
+  // Use AI Assistant hook (combines both status and subtitle data)
+  const { subtitleInfoList, isAITranscriberRunning } = useAIAssistant();
+
+  // Device type detection
+  const isH5 = !TUIGlobal.isPC;
+
+  // Dynamic icon selection based on device type
+  const settingsIcon = isH5 ? subtitleSettingsH5Icon : subtitleSettingsDeskTopIcon;
+  const iconSize = isH5 ? 24 : 20;
+
+  // Parse translation data to extract language and text
+  const parseTranslationData = (content: any) => {
+    if (content === null || content === undefined) {
+      return { language: 'Unknown', text: '' };
+    }
+    
+    // If content is already a string, check if it's a JSON string
+    if (typeof content === 'string') {
+      try {
+        // Try to parse as JSON in case it's a nested JSON string
+        const parsed = JSON.parse(content);
+        if (parsed && typeof parsed === 'object') {
+          return {
+            language: parsed.language || 'Unknown',
+            text: parsed.text || content
+          };
+        }
+        return { language: 'Unknown', text: content };
+      } catch {
+        // If parsing fails, return the original string
+        return { language: 'Unknown', text: content };
+      }
+    }
+    
+    return { language: 'Unknown', text: String(content) };
+  };
+
+  // Format translation content to prevent [object Object] display
+  const formatTranslationContent = (content: any): string => {
+    return parseTranslationData(content).text;
+  };
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    if (subtitleContainerRef.current) {
+      subtitleContainerRef.current.scrollTop = subtitleContainerRef.current.scrollHeight;
+    }
+  }, [subtitleInfoList]);
+
+  // Don't render if transcriber is not running or no subtitles
+  if (!isAITranscriberRunning || !Array.isArray(subtitleInfoList) || subtitleInfoList.length === 0) {
+    return null;
+  }
+
+  const handleMouseEnter = () => {
+    if (!isH5) {
+      setShowSettingsIcon(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (!isH5) {
+      setShowSettingsIcon(false);
+    }
+  };
+
+  return (
+    <div
+      ref={subtitleContainerRef}
+      className={`subtitle-content ${isH5 ? 'subtitle-content--h5' : ''} ${className || ''}`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div 
+        className={`subtitle-content__settings-btn ${isH5 ? 'subtitle-content__settings-btn--h5' : ''}`}
+        style={{ display: isH5 || showSettingsIcon ? 'block' : 'none' }}
+        onClick={onOpenSettings}
+      >
+        <img
+          src={settingsIcon} 
+          width={iconSize} 
+          height={iconSize}
+          alt="Settings"
+        />
+      </div>
+      
+      {subtitleInfoList.map((subtitleInfo: ITranslationInfo, index: number) => (
+        <div key={subtitleInfo.roundId}>
+          {index !== 0 && <div style={{ height: '16px' }} />}
+          <div className="sender-name">{`${subtitleInfo?.nick || subtitleInfo?.sender}:`}</div>
+          <div>{subtitleInfo?.text}</div>
+          {Array.isArray(subtitleInfo?.translation) && subtitleInfo.translation.map((translationContent: ITranslationContent, transIndex: number) => (
+            <div key={transIndex}>
+              <span>{formatTranslationContent(translationContent?.text)}</span>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SubtitleContent;

package/src/Components/components/common/AIAssistant/components/SubtitleSettingsH5.scss

@@ -0,0 +1,275 @@
+.subtitle-settings-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: PingFang SC;
+}
+
+.subtitle-settings-modal {
+  background-color: white;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 400px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: modalSlideIn 0.3s ease-out;
+}
+
+@keyframes modalSlideIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.modal-header {
+  text-align: center;
+  padding: 20px 20px 16px;
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+  margin: 0;
+}
+
+.modal-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 0;
+}
+
+.modal-footer {
+  display: flex;
+  gap: 12px;
+  padding: 16px 20px 20px;
+}
+
+.btn {
+  flex: 1;
+  height: 44px;
+  border-radius: 10px;
+  border: none;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &.btn-cancel {
+    color: #1C66E5;
+    border: 1px solid #1C66E5;
+    background-color: white;
+  }
+
+  &.btn-confirm {
+    background-color: #1677ff;
+    color: white;
+  }
+}
+
+.setting-group {
+  margin-bottom: 12px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.group-title {
+  font-size: 13px;
+  color: #666;
+  padding: 0 20px 8px;
+  margin-bottom: 2px;
+}
+
+.group-content {
+  background: white;
+  border-radius: 8px;
+  margin: 0 16px;
+  overflow: hidden;
+  border: 1px solid #f0f0f0;
+}
+
+.setting-section {
+  border-bottom: 1px solid #f0f0f0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:active {
+    background-color: #f8f8f8;
+  }
+}
+
+.section-title {
+  font-size: 16px;
+  color: #333;
+  font-weight: 400;
+}
+
+.section-value {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #666;
+  gap: 4px;
+}
+
+.arrow-icon {
+  flex-shrink: 0;
+}
+
+.toggle-switch {
+  width: 44px;
+  height: 24px;
+  background-color: #ccc;
+  border-radius: 12px;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.3s;
+
+  &.active {
+    background-color: #1677ff;
+  }
+}
+
+.toggle-slider {
+  width: 20px;
+  height: 20px;
+  background-color: white;
+  border-radius: 50%;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  transition: transform 0.3s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+  .toggle-switch.active & {
+    transform: translateX(20px);
+  }
+}
+
+// Language Selector Styles
+.language-selector-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  overflow: hidden;
+}
+
+.language-selector {
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  border-radius: 16px 16px 0 0;
+  padding-bottom: env(safe-area-inset-bottom);
+  transform: translateY(0);
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.selector-header {
+  text-align: center;
+  padding: 16px 16px 12px;
+  border-bottom: 1px solid #e5e5e5;
+  background: white;
+  border-radius: 16px 16px 0 0;
+}
+
+.selector-title {
+  font-size: 12px;
+  font-weight: 400;
+  color: #00000066;
+  margin: 0;
+}
+
+.language-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 16px 16px;
+  max-height: 50vh;
+}
+
+.language-item {
+  font-family: PingFang SC;
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 16px;
+  leading-trim: NONE;
+  line-height: 100%;
+  letter-spacing: 0px;
+  text-align: center;
+  text-transform: capitalize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 0;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:active {
+    background-color: #f8f8f8;
+  }
+
+  &.selected {
+    color: #1677ff;
+  }
+
+  span {
+    font-size: 16px;
+    color: inherit;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.check-icon {
+  flex-shrink: 0;
+}