hesabixCore/webUI/src/views/wizard/home.vue

<template>
  <v-toolbar color="toolbar" title="هوش مصنوعی حسابیکس">
    <v-spacer></v-spacer>
    <!-- نمایش وضعیت سرویس -->
    <div class="d-flex align-center mr-4">
      <v-chip 
        :color="aiSettings.aiEnabled ? 'success' : 'error'" 
        size="small"
        variant="flat"
        class="mr-2"
      >
        <v-icon start size="16">
          {{ aiSettings.aiEnabled ? 'mdi-robot' : 'mdi-robot-off' }}
        </v-icon>
        {{ aiSettings.aiEnabled ? 'فعال' : 'غیرفعال' }}
      </v-chip>
      <span class="text-caption text-medium-emphasis">
        {{ aiSettings.aiAgentSource.toUpperCase() }} - {{ aiSettings.aiModel }}
      </span>
    </div>
    <!-- نمایش وضعیت اتصال -->
    <div class="d-flex align-center mr-4">
      <v-chip 
        :color="connectionStatus.color" 
        size="small"
        variant="flat"
        class="mr-2"
      >
        <v-icon start size="16">
          {{ connectionStatus.icon }}
        </v-icon>
        {{ connectionStatus.text }}
      </v-chip>
    </div>
  </v-toolbar>
  <div class="page-container">
    <!-- کارت اطلاعات قیمت‌گذاری -->
    <div class="pricing-info" v-if="aiSettings.aiEnabled">
      <v-card variant="outlined" class="ma-4" elevation="0">
        <v-card-text class="pa-4">
          <div class="d-flex align-center justify-space-between">
            <div class="d-flex align-center">
              <v-icon color="info" class="mr-2">mdi-currency-usd</v-icon>
              <span class="text-subtitle-2">قیمت‌گذاری توکن‌ها:</span>
            </div>
            <div class="d-flex align-center gap-4">
              <div class="text-center">
                <div class="text-caption text-medium-emphasis">ورودی</div>
                <div class="text-body-2 font-weight-medium">{{ aiSettings.inputTokenPrice.toLocaleString('fa-IR') }} ریال</div>
              </div>
              <v-divider vertical></v-divider>
              <div class="text-center">
                <div class="text-caption text-medium-emphasis">خروجی</div>
                <div class="text-body-2 font-weight-medium">{{ aiSettings.outputTokenPrice.toLocaleString('fa-IR') }} ریال</div>
              </div>
              <div class="text-caption text-medium-emphasis">(به ازای هر 1000 توکن)</div>
            </div>
          </div>
        </v-card-text>
      </v-card>
    </div>
    
    <!-- آمار استفاده -->
    <div class="usage-stats" v-if="userMessages.length > 0">
      <v-card variant="outlined" class="ma-4" elevation="0">
        <v-card-text class="pa-4">
          <div class="d-flex align-center justify-space-between">
            <div class="d-flex align-center">
              <v-icon color="success" class="mr-2">mdi-chart-line</v-icon>
              <span class="text-subtitle-2">آمار استفاده:</span>
            </div>
            <div class="d-flex align-center gap-4">
              <div class="text-center">
                <div class="text-caption text-medium-emphasis">کل پیام‌ها</div>
                <div class="text-body-2 font-weight-medium">{{ userMessages.length }}</div>
              </div>
              <v-divider vertical></v-divider>
              <div class="text-center">
                <div class="text-caption text-medium-emphasis">پیام‌های هوش مصنوعی</div>
                <div class="text-body-2 font-weight-medium">{{ aiMessageCount }}</div>
              </div>
              <v-divider vertical></v-divider>
              <div class="text-center">
                <div class="text-caption text-medium-emphasis">پیام‌های کاربر</div>
                <div class="text-body-2 font-weight-medium">{{ userMessageCount }}</div>
              </div>
            </div>
          </div>
        </v-card-text>
      </v-card>
    </div>
    
    <div class="content-container">
      <v-card class="chat-container" elevation="0">
        <div class="chat-box">
          <div class="messages-container" ref="messagesContainer">
            <!-- پیام هوش مصنوعی -->
            <div class="message ai-message" v-if="displayWelcome">
              <v-avatar color="#1a237e" size="36" class="mr-2">
                <v-icon color="white" size="20">mdi-robot</v-icon>
              </v-avatar>
              <div class="message-content">
                <div class="message-text typing-text">{{ displayWelcome }}</div>
              </div>
            </div>

            <!-- پیام‌های کاربر و پاسخ‌های هوش مصنوعی -->
            <template v-for="(message, index) in userMessages" :key="index">
              <!-- پیام کاربر -->
              <div class="message user-message" v-if="typeof message === 'string'">
                <div class="message-content">
                  <div class="message-text">{{ message }}</div>
                  <div class="message-time">{{ formatTime(new Date()) }}</div>
                </div>
                <v-avatar color="grey lighten-2" size="36" class="ml-2">
                  <v-icon color="grey darken-1" size="20">mdi-account</v-icon>
                </v-avatar>
              </div>

              <!-- پیام هوش مصنوعی -->
              <div class="message ai-message" v-else-if="message && message.isAI">
                <v-avatar color="#1a237e" size="36" class="mr-2">
                  <v-icon color="white" size="20">mdi-robot</v-icon>
                </v-avatar>
                <div class="message-content" :class="{ 'details-message': message.isDetails }">
                  <div class="message-text" v-html="message.text.replace(/\n/g, '<br>')"></div>
                  <div class="message-time">{{ formatTime(new Date()) }}</div>
                </div>
              </div>
            </template>

            <!-- نشانگر تایپ -->
            <div class="message ai-message" v-if="isTyping">
              <v-avatar color="#1a237e" size="36" class="mr-2">
                <v-icon color="white" size="20">mdi-robot</v-icon>
              </v-avatar>
              <div class="message-content">
                <div class="message-text">
                  <span class="typing-indicator">
                    <span></span>
                    <span></span>
                    <span></span>
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- باکس ورودی پیام -->
          <div class="input-container">
            <div class="d-flex align-center justify-space-between mb-2">
              <v-btn 
                size="small" 
                variant="text" 
                color="grey"
                @click="clearChat"
                :disabled="userMessages.length === 0"
              >
                <v-icon start size="16">mdi-delete</v-icon>
                پاک کردن تاریخچه
              </v-btn>
              <span class="text-caption text-medium-emphasis">
                {{ userMessages.length }} پیام
              </span>
            </div>
            
            <v-textarea v-model="userMessage" placeholder="پیام خود را اینجا بنویسید..." rows="1" auto-grow hide-details
              variant="plain" class="message-input" @keydown.enter.prevent="sendMessage"></v-textarea>
            <v-btn color="#1a237e" icon :loading="isLoading" @click="sendMessage" class="send-button"
              :disabled="!userMessage.trim()">
              <v-icon>mdi-send</v-icon>
            </v-btn>
            
            <!-- پیش‌نمایش پیام -->
            <div class="message-preview" v-if="userMessage.trim()">
              <div class="text-caption text-medium-emphasis mb-1">پیش‌نمایش:</div>
              <div class="preview-content">
                {{ userMessage }}
              </div>
            </div>
          </div>
          
          <!-- پیشنهادات سوالات -->
          <div class="suggestions-container" v-if="userMessages.length === 0">
            <div class="text-caption text-medium-emphasis mb-2">پیشنهادات:</div>
            <div class="d-flex flex-wrap gap-2">
              <v-chip 
                v-for="suggestion in suggestions" 
                :key="suggestion"
                size="small"
                variant="outlined"
                @click="useSuggestion(suggestion)"
                class="suggestion-chip"
              >
                {{ suggestion }}
              </v-chip>
            </div>
          </div>
        </div>
      </v-card>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'WizardHome',
  data() {
    return {
      userMessage: '',
      isLoading: false,
      isTyping: true,
      userMessages: [],
      aiSettings: {
        aiEnabled: false,
        aiAgentSource: 'gapgpt',
        aiModel: 'gpt-4o',
        inputTokenPrice: 0,
        outputTokenPrice: 0,
        aiPrompt: ''
      },
      aiResponses: [
        {
          message: 'با عرض پوزش، در حال حاضر سخت‌افزار پردازش داده متصل نشده است. لطفاً با پشتیبانی فنی تماس بگیرید تا در اسرع وقت مشکل را برطرف کنیم.',
          details: 'برای اتصال سخت‌افزار پردازش داده، نیاز به تنظیمات خاصی است که باید توسط تیم فنی انجام شود. این تنظیمات شامل:\n- اتصال به سرور پردازش\n- تنظیم پارامترهای امنیتی\n- راه‌اندازی ماژول‌های پردازشی\nمی‌باشد.'
        },
        {
          message: 'متأسفانه در حال حاضر سیستم پردازش داده در دسترس نیست. این مشکل موقت است و به زودی برطرف خواهد شد.',
          details: 'برای فعال‌سازی کامل سیستم، نیاز به انجام مراحل زیر است:\n- تأیید اتصال به سرور مرکزی\n- راه‌اندازی ماژول‌های پردازشی\n- تنظیم پارامترهای امنیتی\nلطفاً با پشتیبانی فنی تماس بگیرید.'
        },
        {
          message: 'با کمال تأسف، سخت‌افزار پردازش داده هنوز آماده بهره‌برداری نیست. این مشکل به زودی برطرف خواهد شد.',
          details: 'برای راه‌اندازی کامل سیستم، تیم فنی در حال انجام مراحل زیر است:\n- نصب و پیکربندی سرور پردازش\n- تنظیم پارامترهای امنیتی\n- راه‌اندازی ماژول‌های پردازشی\nلطفاً با پشتیبانی فنی تماس بگیرید.'
        },
        {
          message: 'در حال حاضر سیستم پردازش داده در حالت تعمیر و نگهداری است. به زودی سرویس‌دهی از سر گرفته خواهد شد.',
          details: 'برای فعال‌سازی مجدد سیستم، نیاز به انجام مراحل زیر است:\n- بررسی اتصال به سرور مرکزی\n- به‌روزرسانی ماژول‌های پردازشی\n- تنظیم مجدد پارامترهای امنیتی\nلطفاً با پشتیبانی فنی تماس بگیرید.'
        },
        {
          message: 'با عرض پوزش، سخت‌افزار پردازش داده در حال حاضر غیرفعال است. تیم فنی در حال بررسی و رفع مشکل است.',
          details: 'برای فعال‌سازی سیستم، نیاز به انجام مراحل زیر است:\n- تأیید اتصال به سرور پردازش\n- راه‌اندازی ماژول‌های پردازشی\n- تنظیم پارامترهای امنیتی\nلطفاً با پشتیبانی فنی تماس بگیرید.'
        }
      ],
      welcomePatterns: [
        {
          welcome: 'سلام! 👋',
          thanks: 'به هوش مصنوعی حسابیکس خوش آمدید! من آماده کمک به شما هستم.'
        },
        {
          welcome: 'درود! 🌟',
          thanks: 'خوشحالم که از هوش مصنوعی حسابیکس استفاده می‌کنید. چطور می‌توانم کمک کنم؟'
        },
        {
          welcome: 'سلام و وقت بخیر! ✨',
          thanks: 'به عنوان دستیار هوشمند حسابیکس، آماده خدمت‌رسانی به شما هستم.'
        },
        {
          welcome: 'به حسابیکس خوش آمدید! 🚀',
          thanks: 'من هوش مصنوعی حسابیکس هستم. سؤال یا درخواست خود را بنویسید.'
        },
        {
          welcome: 'سلام! من دستیار شما هستم 🤖',
          thanks: 'خوشحالم که می‌توانم در استفاده از نرم‌افزار حسابیکس به شما کمک کنم.'
        }
      ],
      selectedPattern: null,
      displayWelcome: '',
      suggestions: [
        'چگونه می‌توانم گزارش مالی تهیه کنم؟',
        'راهنمای استفاده از نرم‌افزار',
        'چگونه فاکتور جدید ایجاد کنم؟',
        'مشکلات رایج و راه‌حل‌ها',
        'تنظیمات سیستم'
      ],
      connectionStatus: {
        color: 'warning',
        icon: 'mdi-clock',
        text: 'در حال بررسی اتصال...'
      }
    }
  },
  computed: {
    aiMessageCount() {
      return this.userMessages.filter(msg => msg && msg.isAI).length
    },
    userMessageCount() {
      return this.userMessages.filter(msg => typeof msg === 'string').length
    }
  },
  async mounted() {
    await this.loadAISettings()
    await this.checkConnectionStatus()
    await this.startTypingAnimation()
  },
  watch: {
    userMessages: {
      handler() {
        this.$nextTick(() => {
          this.scrollToBottom()
        })
      },
      deep: true
    },
    displayWelcome() {
      this.$nextTick(() => {
        this.scrollToBottom()
      })
    }
  },
  methods: {
    async loadAISettings() {
      try {
        const response = await axios.get('/api/wizard/settings')
        if (response.data.success) {
          this.aiSettings = response.data.settings
        }
      } catch (error) {
        console.error('Error loading AI settings:', error)
      }
    },
    async checkConnectionStatus() {
      try {
        const response = await axios.get('/api/wizard/status')
        console.log('Status response:', response.data) // اضافه کردن log
        if (response.data.success) {
          let color = 'success'
          let icon = 'mdi-check-circle'
          let text = 'اتصال به سرور موفق'
          
          switch (response.data.status) {
            case 'available':
              color = 'success'
              icon = 'mdi-check-circle'
              text = 'اتصال به سرور موفق'
              break
            case 'disabled':
              color = 'error'
              icon = 'mdi-robot-off'
              text = 'سرویس هوش مصنوعی غیرفعال'
              break
            case 'no_api_key':
              color = 'warning'
              icon = 'mdi-key-remove'
              text = 'کلید API تنظیم نشده'
              break
            default:
              color = 'error'
              icon = 'mdi-alert-circle'
              text = 'اتصال به سرور متصل نیست'
          }
          
          this.connectionStatus = {
            color: color,
            icon: icon,
            text: text
          }
          console.log('Connection status updated:', this.connectionStatus) // اضافه کردن log
        } else {
          this.connectionStatus = {
            color: 'error',
            icon: 'mdi-alert-circle',
            text: 'خطا در بررسی وضعیت اتصال'
          }
        }
      } catch (error) {
        console.error('Error checking connection status:', error)
        this.connectionStatus = {
          color: 'error',
          icon: 'mdi-alert-circle',
          text: 'خطا در ارتباط با سرور'
        }
      }
    },
    async startTypingAnimation() {
      // تایپ یک پیام ساده
      await this.typeText('سلام! من دستیار هوشمند حسابیکس هستم. چطور می‌توانم کمک کنم؟', (text) => {
        this.displayWelcome = text
      }, 30)

      this.isTyping = false
    },
    async typeText(text, callback, speed = 50) {
      let currentText = ''
      for (let i = 0; i < text.length; i++) {
        currentText += text[i]
        callback(currentText)
        await this.delay(speed)
      }
    },
    delay(ms) {
      return new Promise(resolve => setTimeout(resolve, ms))
    },
    async sendMessage() {
      if (!this.userMessage.trim()) return

      // بررسی فعال بودن هوش مصنوعی
      if (!this.aiSettings.aiEnabled) {
        this.userMessages.push({
          text: 'سرویس هوش مصنوعی غیرفعال است. لطفاً ابتدا آن را در تنظیمات سیستم فعال کنید.',
          isAI: true,
          isDetails: true
        })
        return
      }

      const message = this.userMessage.trim()
      this.userMessages.push(message)
      this.userMessage = ''
      this.isLoading = true

      try {
        // ارسال درخواست به بک‌اند
        const response = await axios.post('/api/wizard/talk', {
          message: message,
          options: {
            model: this.aiSettings.aiModel,
            temperature: 0.7,
            max_tokens: 1000
          }
        })

        if (response.data.success) {
          // نمایش پاسخ هوش مصنوعی
          this.userMessages.push({
            text: response.data.response,
            isAI: true
          })

          // نمایش اطلاعات اضافی در صورت وجود
          if (response.data.usage || response.data.cost) {
            let detailsText = ''
            if (response.data.usage) {
              detailsText += `توکن‌های ورودی: ${response.data.usage.prompt_tokens || 0}\n`
              detailsText += `توکن‌های خروجی: ${response.data.usage.completion_tokens || 0}\n`
              detailsText += `کل توکن‌ها: ${response.data.usage.total_tokens || 0}\n`
            }
            if (response.data.cost) {
              detailsText += `هزینه: ${response.data.cost.toLocaleString('fa-IR')} ریال`
            }
            if (response.data.model) {
              detailsText += `\nمدل: ${response.data.model}`
            }

            if (detailsText) {
              this.userMessages.push({
                text: detailsText,
                isAI: true,
                isDetails: true
              })
            }
          }
        } else {
          // نمایش خطا
          this.userMessages.push({
            text: `خطا: ${response.data.error}`,
            isAI: true,
            isDetails: true
          })
        }
      } catch (error) {
        console.error('Error sending message:', error)
        
        // نمایش خطای شبکه
        this.userMessages.push({
          text: 'خطا در ارتباط با سرور. لطفاً دوباره تلاش کنید.',
          isAI: true,
          isDetails: true
        })
      }

      this.isLoading = false
      this.$nextTick(() => {
        this.scrollToBottom()
      })
    },
    scrollToBottom() {
      const container = this.$refs.messagesContainer
      if (container) {
        container.scrollTo({
          top: container.scrollHeight,
          behavior: 'smooth'
        })
      }
    },
    clearChat() {
      this.userMessages = []
      this.displayWelcome = ''
      this.isTyping = true
      this.startTypingAnimation()
    },
    useSuggestion(suggestion) {
      this.userMessage = suggestion
    },
    formatTime(date) {
      return new Intl.DateTimeFormat('fa-IR', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }).format(date)
    }
  }
}
</script>

<style scoped>
.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.content-container {
  flex: 1;
  height: 100vh;
}

.chat-container {
  height: 100%;
  background-color: #f5f5f5;
}

.chat-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message {
  display: flex;
  align-items: flex-start;
  max-width: 80%;
}

.ai-message {
  align-self: flex-start;
}

.user-message {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.message-content {
  background-color: white;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ai-message .message-content {
  background-color: #e3f2fd;
  border-bottom-right-radius: 4px;
}

.user-message .message-content {
  background-color: #1a237e;
  color: white;
  border-bottom-left-radius: 4px;
}

.message-text {
  font-size: 1rem;
  line-height: 1.5;
}

.message-time {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 4px;
  text-align: right;
}

.user-message .message-time {
  color: rgba(255, 255, 255, 0.7);
}

/* استایل برای پیش‌نمایش پیام */
.message-preview {
  margin-top: 8px;
  padding: 8px;
  background-color: #f5f5f5;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.preview-content {
  font-size: 0.875rem;
  color: #424242;
  line-height: 1.4;
  max-height: 60px;
  overflow-y: auto;
}

.input-container {
  padding: 16px;
  background-color: white;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
}

.message-input {
  background-color: #f5f5f5 !important;
  border-radius: 24px;
  padding: 8px 16px !important;
}

.message-input :deep(.v-field__input) {
  padding: 8px !important;
  font-size: 1rem;
  color: #424242;
}

.send-button {
  transition: all 0.3s ease;
}

.send-button:hover {
  transform: scale(1.1);
}

.typing-indicator {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 24px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background-color: #1a237e;
  border-radius: 50%;
  animation: typing 1s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.details-message {
  background-color: #f5f5f5 !important;
  border: 1px solid #e0e0e0;
  font-size: 0.9rem;
  color: #616161;
}

.details-message .message-text {
  white-space: pre-line;
}

.messages-container::-webkit-scrollbar {
  width: 6px;
}

.messages-container::-webkit-scrollbar-track {
  background: transparent;
}

.messages-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.messages-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* استایل برای کارت اطلاعات قیمت‌گذاری */
.pricing-info {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.pricing-info .v-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

/* انیمیشن برای chip وضعیت */
.v-chip {
  transition: all 0.3s ease;
}

.v-chip:hover {
  transform: scale(1.05);
}

/* بهبود ظاهر toolbar */
.v-toolbar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* استایل برای پیام‌های خطا */
.message-content.error-message {
  background-color: #ffebee !important;
  border: 1px solid #ffcdd2;
  color: #c62828;
}

/* استایل برای پیام‌های موفقیت */
.message-content.success-message {
  background-color: #e8f5e8 !important;
  border: 1px solid #c8e6c9;
  color: #2e7d32;
}

/* استایل برای پیشنهادات */
.suggestions-container {
  padding: 16px;
  background-color: #f8f9fa;
  border-top: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
}

.suggestion-chip {
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: white;
  border: 1px solid #dee2e6;
  margin: 2px;
}

.suggestion-chip:hover {
  background-color: #e3f2fd !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: #1a237e;
}

/* بهبود ظاهر input container */
.input-container {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-top: 2px solid #e9ecef;
  padding: 16px;
}

/* استایل برای آمار استفاده */
.usage-stats {
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
}

.usage-stats .v-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

/* انیمیشن برای کارت‌های آمار */
.usage-stats .v-card,
.pricing-info .v-card {
  transition: all 0.3s ease;
}

.usage-stats .v-card:hover,
.pricing-info .v-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
</style>