Skip to content

feat: create application ui #3190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 4, 2025
Merged

feat: create application ui #3190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 20 additions & 19 deletions ui/src/api/type/application.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ interface ApplicationFormType {
model_id?: string
dialogue_number?: number
prologue?: string
dataset_id_list?: string[]
dataset_setting?: any
knowledge_id_list?: string[]
knowledge_setting?: any
model_setting?: any
problem_optimization?: boolean
problem_optimization_prompt?: string
Expand All @@ -24,6 +24,7 @@ interface ApplicationFormType {
tts_type?: string
tts_autoplay?: boolean
stt_autosend?: boolean
folder_id?: string
}
interface Chunk {
real_node_id: string
Expand Down Expand Up @@ -118,7 +119,7 @@ export class ChatRecordManage {
chat_record_id?: string,
runtime_node_id?: string,
child_node?: any,
real_node_id?: string
real_node_id?: string,
) {
if (chunk_answer || reasoning_content) {
const set_index = index != undefined ? index : this.chat.answer_text_list.length - 1
Expand All @@ -142,7 +143,7 @@ export class ChatRecordManage {
chat_record_id,
runtime_node_id,
child_node,
real_node_id
real_node_id,
})
}
}
Expand All @@ -167,7 +168,7 @@ export class ChatRecordManage {
return this.write_node_info
}
const run_node = this.node_list.filter(
(item) => item.reasoning_content_buffer.length > 0 || item.buffer.length > 0 || !item.is_end
(item) => item.reasoning_content_buffer.length > 0 || item.buffer.length > 0 || !item.is_end,
)[0]

if (run_node) {
Expand All @@ -185,7 +186,7 @@ export class ChatRecordManage {
const none_index = this.findIndex(
this.chat.answer_text_list,
(item) => (item.length == 1 && item[0].content == '') || item.length == 0,
'index'
'index',
)
if (none_index > -1) {
answer_text_list_index = none_index
Expand All @@ -196,7 +197,7 @@ export class ChatRecordManage {
const none_index = this.findIndex(
this.chat.answer_text_list,
(item) => (item.length == 1 && item[0].content == '') || item.length == 0,
'index'
'index',
)
if (none_index > -1) {
answer_text_list_index = none_index
Expand All @@ -208,7 +209,7 @@ export class ChatRecordManage {
this.write_node_info = {
current_node: run_node,
current_up_node: current_up_node,
answer_text_list_index: answer_text_list_index
answer_text_list_index: answer_text_list_index,
}

return this.write_node_info
Expand Down Expand Up @@ -241,7 +242,7 @@ export class ChatRecordManage {
const last_index = this.findIndex(
this.chat.answer_text_list,
(item) => (item.length == 1 && item[0].content == '') || item.length == 0,
'last'
'last',
)
if (last_index > 0) {
this.chat.answer_text_list.splice(last_index, 1)
Expand Down Expand Up @@ -274,13 +275,13 @@ export class ChatRecordManage {
? current_node.buffer.splice(0)
: current_node.buffer.splice(
0,
current_node.is_end ? undefined : current_node.buffer.length - 20
current_node.is_end ? undefined : current_node.buffer.length - 20,
)
const reasoning_content = current_node.is_end
? current_node.reasoning_content_buffer.splice(0)
: current_node.reasoning_content_buffer.splice(
0,
current_node.is_end ? undefined : current_node.reasoning_content_buffer.length - 20
current_node.is_end ? undefined : current_node.reasoning_content_buffer.length - 20,
)
this.append_answer(
context.join(''),
Expand All @@ -289,7 +290,7 @@ export class ChatRecordManage {
current_node.chat_record_id,
current_node.runtime_node_id,
current_node.child_node,
current_node.real_node_id
current_node.real_node_id,
)
} else if (this.is_close) {
while (true) {
Expand All @@ -305,7 +306,7 @@ export class ChatRecordManage {
node_info.current_node.chat_record_id,
node_info.current_node.runtime_node_id,
node_info.current_node.child_node,
node_info.current_node.real_node_id
node_info.current_node.real_node_id,
)

if (
Expand All @@ -327,7 +328,7 @@ export class ChatRecordManage {
current_node.chat_record_id,
current_node.runtime_node_id,
current_node.child_node,
current_node.real_node_id
current_node.real_node_id,
)
}
if (reasoning_content !== undefined) {
Expand All @@ -338,7 +339,7 @@ export class ChatRecordManage {
current_node.chat_record_id,
current_node.runtime_node_id,
current_node.child_node,
current_node.real_node_id
current_node.real_node_id,
)
}
}
Expand Down Expand Up @@ -383,7 +384,7 @@ export class ChatRecordManage {
node_type: chunk.node_type,
index: this.node_list.length,
view_type: chunk.view_type,
is_end: false
is_end: false,
}
this.node_list.push(n)
}
Expand All @@ -395,16 +396,16 @@ export class ChatRecordManage {
let set_index = this.findIndex(
this.chat.answer_text_list,
(item) => item.length == 1 && item[0].content == '',
'index'
'index',
)
if (set_index <= -1) {
set_index = 0
}
this.chat.answer_text_list[set_index] = [
{
content: answer_text_block,
reasoning_content: reasoning_content ? reasoning_content : ''
}
reasoning_content: reasoning_content ? reasoning_content : '',
},
]
}
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code appears to be TypeScript interfaces and classes related to a chat management system. Here are some observations and potential improvements:

  1. Interface ApplicationFormType:

    • The properties have been updated from dataset_id_list and knowledge_setting to knowledge_id_list and knowledge_setting, which might indicate that there's a change in the data model based on user feedback or new requirements.

  2. Class ChatRecordManage:

    • Methods like writeNodeInfo, findIndex, and others need further review for their logic and potential errors.
    • Method chaining (current_node.buffer.splice(...)) with optional parameters should be carefully reviewed to ensure they operate correctly without causing unintended behavior.
    • The method appendAnswer and its usage seem consistent but could benefit from better comments explaining the purpose of each argument.

  3. General Improvements:

    • Consider adding type annotations where possible to improve code readability and maintainability.
    • Implement error handling in critical methods such as those checking conditions and updating state (if...else statements).
    • Review the use of generics within functions where applicable.
    • For instance loops, consider using more modern JavaScript syntax, such as map() or reduce() when applicable.

Here is a brief summary of potential optimizations and fixes:

  • Error Handling: Add try-catch blocks around methods dealing with database operations or file I/O to catch unexpected errors gracefully.

    // Example addition
function safeDatabaseQuery(query: string): void {
  try {
    const result = await executeDatabaseQuery(query);
    console.log(result);
  } catch (error) {
    console.error("Error executing query:", error);
  }
}

  • Readability Enhancements: Use meaningful variable names, add comments explain complex logic, and refactor code to adhere to best practices.

By addressing these areas, you can create a more robust and efficient system.

Expand Down
51 changes: 29 additions & 22 deletions ui/src/views/application/component/CreateApplicationDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,11 +121,11 @@ const dialogVisible = ref<boolean>(false)
const applicationForm = ref<ApplicationFormType>({
name: '',
desc: '',
model_id: '',
model_id: undefined,
dialogue_number: 1,
prologue: t('views.application.form.defaultPrologue'),
dataset_id_list: [],
dataset_setting: {
knowledge_id_list: [],
knowledge_setting: {
top_n: 3,
similarity: 0.6,
max_paragraph_char_number: 5000,
Expand All @@ -143,8 +143,8 @@ const applicationForm = ref<ApplicationFormType>({
model_params_setting: {},
problem_optimization: false,
problem_optimization_prompt: optimizationPrompt,
stt_model_id: '',
tts_model_id: '',
stt_model_id: undefined,
tts_model_id: undefined,
stt_model_enable: false,
tts_model_enable: false,
tts_type: 'BROWSER',
Expand Down Expand Up @@ -175,11 +175,11 @@ watch(dialogVisible, (bool) => {
applicationForm.value = {
name: '',
desc: '',
model_id: '',
model_id: undefined,
dialogue_number: 1,
prologue: t('views.application.form.defaultPrologue'),
dataset_id_list: [],
dataset_setting: {
knowledge_id_list: [],
knowledge_setting: {
top_n: 3,
similarity: 0.6,
max_paragraph_char_number: 5000,
Expand All @@ -197,8 +197,8 @@ watch(dialogVisible, (bool) => {
model_params_setting: {},
problem_optimization: false,
problem_optimization_prompt: optimizationPrompt,
stt_model_id: '',
tts_model_id: '',
stt_model_id: undefined,
tts_model_id: undefined,
stt_model_enable: false,
tts_model_enable: false,
tts_type: 'BROWSER',
Expand All @@ -208,32 +208,39 @@ watch(dialogVisible, (bool) => {
}
})

const open = (folder: string, type?: sting) => {
const open = (folder: string, type?: string) => {
currentFolder.value = folder
applicationForm.value.type = type || 'SIMPLE'
dialogVisible.value = true
}

const submitHandle = async (formEl: FormInstance | undefined) => {
if (!formEl) return
console.log(applicationForm.value.type)
await formEl.validate((valid) => {
if (valid) {
applicationForm.value['folder_id'] = currentFolder.value
if (isWorkFlow(applicationForm.value.type) && appTemplate.value === 'blank') {
workflowDefault.value.nodes[0].properties.node_data.desc = applicationForm.value.desc
workflowDefault.value.nodes[0].properties.node_data.name = applicationForm.value.name
applicationForm.value['work_flow'] = workflowDefault.value
}
applicationApi.postApplication('default', applicationForm.value, loading).then((res) => {
MsgSuccess(t('common.createSuccess'))
emit('refresh')
if (isWorkFlow(applicationForm.value.type)) {
router.push({ path: `/application/${res.data.id}/workflow` })
} else {
router.push({ path: `/application/${res.data.id}/${res.data.type}/setting` })
}
dialogVisible.value = false
})
console.log(applicationForm.value.type)
applicationApi
.postApplication(
'default',
{ ...applicationForm.value, folder_id: currentFolder.value },
loading,
)
.then((res) => {
MsgSuccess(t('common.createSuccess'))
emit('refresh')
if (isWorkFlow(applicationForm.value.type)) {
router.push({ path: `/application/${res.data.id}/workflow` })
} else {
router.push({ path: `/application/${res.data.id}/${res.data.type}/setting` })
}
dialogVisible.value = false
})
}
})
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code has the following issues:

  1. A missing closing brace } at line 120, causing an incomplete function body.

  2. The parameter types specified in TypeScript interface declarations (ApplicationFormType) do not include type annotations for stt_model_enable and tt<|fim_suffix|>n is defined without checking its value before being called with it. If formElmight beundefined`, you should handle that case to prevent errors.

To optimize the submitHandle function:

  • Remove redundant logging of form data within the await validate callback.
  • Log only when there are validation issues or when successful submission occurs.

These modifications ensure robust error handling and better readability of the code.

Expand Down
4 changes: 2 additions & 2 deletions ui/src/views/application/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
</el-button>
<template #dropdown>
<el-dropdown-menu class="create-dropdown">
<el-dropdown-item @click="openCreateDialog">
<el-dropdown-item @click="openCreateDialog('SIMPLE')">
<div class="flex">
<el-avatar shape="square" class="avatar-blue mt-4" :size="36">
<img
Expand Down Expand Up @@ -248,7 +248,7 @@ import useStore from '@/stores'
import { numberFormat } from '@/utils/common'
import { t } from '@/locales'
import { useRouter } from 'vue-router'

import { isWorkFlow } from '@/utils/application'
const router = useRouter()
const { folder } = useStore()

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code snippet appears to be TypeScript/JavaScript code for a Vue component related to creating resources within an application. Here are some observations and potential improvements:

Observations:

  1. Missing ref Import: The file lacks import statements for ref. Refs are used in Vue 3 to handle reactive state.

    import { ref } from 'vue';

    This should be added near the top of your script block.

  2. Typographical Errors:

    • @click="openCreateDialog" could potentially cause runtime errors if not properly defined.

  3. Unused Imports:

    • No imports are used after import isWorkFlow from '@/utils/application'.
    • It seems that isWorkFlow is not utilized in the code snippet.

  4. Variable Initialization:

    • There's no initialization for const router = useRouter(), which might lead to undefined values later on.

  5. Documentation Comments:

    • Some comments seem unnecessary or unclear, especially about what each line does if they can't be inferred from variable names or function calls.

  6. Code Style and Readability:

    • There's inconsistent whitespace at around line 47. Ensure consistent indentation and spacing for readability.

Improvement Suggestions:

Add Missing Ref

import { ref } from 'vue';

// Other necessary imports...

Initialize Variables Properly

Ensure all variables are properly initialized:

import { ref } from 'vue';
import { useRouter } from 'vue-router'; // Assuming useRouter is used somewhere

const router = useRouter();
const folder = useStore().folder;
// ...

Remove Unused Imports and Fix Typography

Review unusedImports (t, useRouter) and fix any typos in the button click handler comment (e.g., "createDialog").

Example Corrections:

  1. Remove Typos:

    <!-- Corrected typo here -->
<template #dropdown></template>

  2. Fix Click Handler Comment:

    /* Corrected click handler comment */
@click="openCreateDialog('SIMPLE')"

  3. Consistent Spacing:

    <!-- Consistent spacing example -->
        </el-button>
    </el-dropdown-menu>

By addressing these issues, you should have better maintainable and correct code.

Expand Down
Loading