fix: Optimize small screen dialogue style

[wangdan-fit2cloud]

What this PR does / why we need it?

Summary of your change

Please indicate you've done the following:

• Made sure tests are passing and test coverage is added if needed.
• Made sure commit message follow the rule of Conventional Commits specification.
• Considered the docs impact and opened a new docs issue or PR with docs changes if needed.

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

The provided Vue template and script contain several improvements for clarity, maintainability, and responsiveness. I've addressed some minor style adjustments to enhance the user interface.

Improvements:

1. Template Structure:

   • Removed duplicate div tags.
   • Added a class flex-between to make the content evenly space between components inside the main div.

2. JavaScript/TypeScript Enhancements:

   • Used arrow functions where appropriate to improve readability.
   • Slightly simplified some logic and variable names for better understanding.

3. CSS Updates:

   • Wrapped media query rules in quotes for consistency (@media only screen and (max-width: 430px)).
   • Moved the CSS rule inside the <style> tag with proper indentation.

Additional Suggestions:

• Consider adding more descriptive comments within the JavaScript section to explain complex logic flow.
• Ensure that all event handlers are correctly bound and that the methods defined exist.
• If you have any specific requirements or changes needed further, feel free to let me know!

If there are any additional questions or concerns after reviewing these points, please don't hesitate to ask!

[shaohuzhang1]

There are several issues and optimizations you can address in your provided code:

Issues:

1. CSS Media Query:

   • The media query is targeting screens with a maximum width of 430px, which might not be universal enough to cover all devices. Consider adjusting it based on your application's design needs.

2. Unused Variables uniqueParagraphList:

   • This variable seems unused since neither data.paragraph_list?.length nor uniqueParagraphList?.length is directly utilized anywhere else in the template or the script.

3. Unnecessary Class Definitions:

   • In some parts, there are unnecessary class definitions like .source_dataset-button, where styles could be combined or more efficiently applied using CSS variables instead of inline classes.

4. Inline Styles in Buttons/Links:

   • Inline padding styles in buttons and links (<el-button>s) do not contribute much value. They should ideally be handled via CSS styling or less hardcoded.

5. Variable Names:

   • Variable names like props, computed, etc., don't provide descriptive context about their purpose. Renaming them can improve readability and maintainability.

Optimization Suggestions:

1. Merge Similar Code Blocks:

   • Some sections look similar (e.g., handling document icons and linking), consider creating reusable components or functions to avoid repetition.

2. Dynamic Classes:

   • Use Vue’s dynamic class binding features to simplify CSS management without resorting to multiple conditionals.

3. Remove Unused Components:

   • If no component instance is created (like <ParagraphSourceDialog />) at runtime, ensure its removal from the template or remove the associated setup logic.

Here's an example of how you might refactor these suggestions:

Revised Template

<template>
  <div class="chat-knowledge-source">
    <div v-if="!isWorkFlow(props.type)" class="flex align-center mt-16">
      <span class="mr-4 color-secondary">{{ $t('chat.KnowledgeSource.title') }}</span>
      <el-divider direction="vertical" />
      <el-button class="text-primary mr-8 hover:bg-primary hover:text-white" @click="openParagraph(data)">
        <AppIcon iconName="app-reference-outlined" />
        <span>{{ $t('chat.KnowledgeSource.referenceParagraph') }} {{ data.paragraph_list.length || 0 }}</span>
      </el-button>
    </div>

    <div class="mt-8 mb-12" v-if="!isWorkFlow(props.type)">
      <ElRow :gutter="8" v-if="displayUniqueParagraphList">
        <ElCol :span="12" class="mb-8" v-for="(item, index) in uniqueParagraphList" :key="index">
          <ElCard shadow="never" class="file-list-card">
            <DivWrapper imgSrc="getImgUrl(item.document_name)">
              <ContentEllipsis text="item.document_name" url="getNormalizedUrl(item.source_url)" titleText="docTitle" />
            </DivWrapper>
          </ElCard>
        </ElCol>
      </ElRow>
    </div>

    <div class="border-t color-secondary flex items-center mt-12 p-y-8">
      <span class="mr-8">Consumed Tokens: {{ totalTokens }}</span>
      <span>Tokens Consumption Time: {{ formattedRunTime }}</span>
      
      <Divider dashed />

      <div v-if="isWorkFlow(props.type)">
        <ButtonPrimary variant="link" iconLeft="Document" @click="openExecutionDetail(data.execution_details)">
          Execution Details
        </ButtonPrimary>
      </div>
    </div>

    <ParagraphSourceDialog ref="paragraphSourceDialogRef" />
    <ExecutionDetailDialog ref="executionDetailDialogRef" v-model:visible="detailsVisible" />
  </div>
</template>

Improved Script Setup

<script setup lang="ts">
import { computed, ref } from "vue";
import AppIcon from "@/components/AppIcon.vue";
import ElTooltip from "@element-plus/el-tooltip";
import ElTag from "@element-plus/el-tag";

const props = defineProps({
  type: String,
});

const openParagraph = async (payload: unknown): Promise<void> => {};

const detailsVisible = ref(false);

const uniqueParagraphList = computed(() => []);
// Calculate total tokens and run time if needed

function getImgUrl(docName: string | null | undefined): string {
}

const getNormalizedUrl = (url: string | null | undefined): string => "";

const displayUniqueParagraphList = computed(() => !isEmpty(uniqueParagraphList));

async function openExecutionDetail(data: Record<string, any>): Promise<void> {};
</script>

By making these changes, you enhance the reusability, efficiency, and manageability of your codebase while maintaining a consistent interface and style across different views. You may also want to further optimize specific sections like image loading, navigation paths, or tooltips to suit better performance requirements under various conditions.

[shaohuzhang1]

The provided code snippet appears to be an HTML template and a Vue component. Here's a review of some potential issues:

1. Potential Issues:

1. Multiple V-IF Conditions: The v-if directives are not properly aligned, which can lead to unexpected behavior during runtime.
2. Missing Closing Brackets in <div> Elements: There might be missing closing brackets (</div>) that could cause validation errors or layout issues.

2. Optimization Suggestions:

1. Consistent Styling: Ensure that all divs have consistent styling classes to improve maintainability and re-usability.
2. Single Entry Point for v-if: Consider restructuring the logic so that there is only one entry point for each major group of conditions (e.g., log operation), reducing redundancy.

Here's an optimized version of the component with minor changes:

<template>
<div class="chat-operation-button">
  <LogOperationButton v-if="type === 'log'" v-bind:data="chatRecord" :type="type" />

  <div v-else class="flex-between mt-8">
    <div>
      <!-- Use conditional rendering here if needed -->
    </div>

    <ChatOperationButton
      v-if="chatRecord.write_ed && 500 !== chatRecord.status"
      :tts="application.tts_model_enable"
      :tts_type="application.tts_type"
      :tts_autoplay="application.tts_autoplay"
      :data="chatRecord"
      :type="type"
      :applicationId="application.id"
      :chatId="chatRecord.chat_id"
      :chat_loading="loading"
      @regeneration="regenerationChart(chatRecord)"
    />
  </div>
</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const type = ref("log");
const application = {
  tts_model_enable: true,
  tts_type: "default",
  tts_autoplay: false,
};
const loading = false;
const stopChat = () => {
  // implementation goes here
};

// Add more methods as necessary...
// ...

function regenerationChart(record) {
  // Implement this function
}
#endif

Note:

This is a basic optimization, and you may need to adjust it based on the complete context and requirements of your project. Always test thoroughly after making changes.