Skip to content

Commit

Permalink
Merge pull request #1626 from solliancenet/sc-fix-ui-lint-errors-2-ch…
Browse files Browse the repository at this point in the history
…erry-pick

(0.8.1) Fix UI lint errors
  • Loading branch information
ciprianjichici authored Aug 27, 2024
2 parents 7d79dc2 + 16b6e8c commit 4a318f2
Show file tree
Hide file tree
Showing 20 changed files with 611 additions and 594 deletions.
8 changes: 7 additions & 1 deletion src/ui/ManagementPortal/.eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,13 @@ module.exports = {
rules: {
'prettier/prettier': ['error'],
'vue/html-indent': ['error', 'tab'],
'vue/script-indent': ['error', 'tab'],
'vue/script-indent': [
'error',
'tab',
{
switchCase: 1,
},
],
'vue/singleline-html-element-content-newline': 0,
'vue/component-name-in-template-casing': ['error', 'PascalCase'],
'no-console': 'off',
Expand Down
3 changes: 2 additions & 1 deletion src/ui/ManagementPortal/pages/agents/create.vue
Original file line number Diff line number Diff line change
Expand Up @@ -1040,7 +1040,8 @@ export default {
this.aiModelOptions.find((aiModel) => aiModel.object_id === agent.ai_model_object_id) ||
null;
this.conversationHistory = agent.conversation_history_settings?.enabled || this.conversationHistory;
this.conversationHistory =
agent.conversation_history_settings?.enabled || this.conversationHistory;
this.conversationMaxMessages =
agent.conversation_history_settings?.max_history || this.conversationMaxMessages;
Expand Down
4 changes: 3 additions & 1 deletion src/ui/ManagementPortal/plugins/init.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { defineNuxtPlugin } from '#app';
import { useAppConfigStore, useAuthStore, useAppStore } from '@/stores';
import api from '@/js/api';
import { useAppConfigStore } from '@/stores/appConfigStore';
import { useAuthStore } from '@/stores/authStore';
import { useAppStore } from '@/stores/appStore';

export default defineNuxtPlugin(async (nuxtApp: any) => {
// Load config variables into the app config store
Expand Down
5 changes: 0 additions & 5 deletions src/ui/ManagementPortal/stores/index.ts

This file was deleted.

10 changes: 9 additions & 1 deletion src/ui/UserPortal/.eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,17 @@ module.exports = {
rules: {
'prettier/prettier': ['error'],
'vue/html-indent': ['error', 'tab'],
'vue/script-indent': ['error', 'tab'],
'vue/script-indent': [
'error',
'tab',
{
switchCase: 1,
},
],
'vue/singleline-html-element-content-newline': 0,
'vue/component-name-in-template-casing': ['error', 'PascalCase'],
'no-console': 'off',
'vue/no-multiple-template-root': 'off',
'vue/multi-word-component-names': 'off',
},
};
117 changes: 58 additions & 59 deletions src/ui/UserPortal/components/AgentIcon.vue
Original file line number Diff line number Diff line change
@@ -1,59 +1,58 @@
<template>
<img
v-if="resolvedSrc !== ''"
v-tooltip.bottom="tooltip"
:alt="alt"
class="avatar"
:src="resolvedSrc"
/>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
export default defineComponent({
name: 'AgentIcon',
props: {
src: {
type: String,
required: true,
},
alt: {
type: String,
default: 'Agent icon',
},
tooltip: {
type: String,
default: '',
},
},
setup(props) {
const resolvedSrc = computed(() => {
if (props.src.startsWith('~')) {
// Handle relative path dynamically
return new URL(`../assets/${props.src.slice(9)}`, import.meta.url).href;
}
return props.src;
});
const tooltipDirective = computed(() => {
return props.tooltip !== '' ? { 'v-tooltip': { value: props.tooltip, bottom: true } } : {};
});
return {
resolvedSrc,
tooltipDirective,
};
},
});
</script>

<style scoped>
.avatar {
/* Add any specific styling for the avatar here */
width: 40px;
height: 40px;
border-radius: 50%;
}
</style>

<template>
<img
v-if="resolvedSrc !== ''"
v-tooltip.bottom="tooltip"
:alt="alt"
class="avatar"
:src="resolvedSrc"
/>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
export default defineComponent({
name: 'AgentIcon',
props: {
src: {
type: String,
required: true,
},
alt: {
type: String,
default: 'Agent icon',
},
tooltip: {
type: String,
default: '',
},
},
setup(props) {
const resolvedSrc = computed(() => {
if (props.src.startsWith('~')) {
// Handle relative path dynamically
return new URL(`../assets/${props.src.slice(9)}`, import.meta.url).href;
}
return props.src;
});
const tooltipDirective = computed(() => {
return props.tooltip !== '' ? { 'v-tooltip': { value: props.tooltip, bottom: true } } : {};
});
return {
resolvedSrc,
tooltipDirective,
};
},
});
</script>

<style scoped>
.avatar {
/* Add any specific styling for the avatar here */
width: 40px;
height: 40px;
border-radius: 50%;
}
</style>
167 changes: 86 additions & 81 deletions src/ui/UserPortal/components/AnalysisModal.vue
Original file line number Diff line number Diff line change
@@ -1,81 +1,86 @@
<template>
<Dialog
:visible="visible"
:header="header"
:modal="true"
:closable="true"
:style="{ width: '50vw' }"
@update:visible="$emit('update:visible', $event)"
>
<template v-if="analysisResults && analysisResults.length > 0" v-slot:default>
<div v-for="(analysis, index) in analysisResults" :key="index" class="analysis-block">
<h4>Tool: {{ analysis.tool_name }}</h4>
<p><strong>Category:</strong> {{ analysis.agent_capability_category }}</p>
<CodeBlockHeader language="python" :codecontent="encodeURIComponent(analysis.tool_input)">
<pre v-html="renderCodeBlock(analysis.tool_input)"></pre>
</CodeBlockHeader>
<p v-if="analysis.tool_output"><strong>Output:</strong> {{ analysis.tool_output }}</p>
</div>
</template>
<template v-if="!analysisResults || analysisResults.length === 0">
<p>No analysis results available.</p>
</template>
</Dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import type { PropType } from 'vue';
import { marked } from 'marked';
import type { AnalysisResult } from '@/js/types';
import CodeBlockHeader from '@/components/CodeBlockHeader.vue';
export default defineComponent({
name: 'AnalysisModal',
components: {
CodeBlockHeader
},
props: {
visible: {
type: Boolean,
required: true,
},
analysisResults: {
type: Array as PropType<Array<AnalysisResult>>,
required: true,
},
header: {
type: String,
default: 'Analysis',
},
},
methods: {
renderCodeBlock(code: string) {
return marked(`\`\`\`python\n${code}\n\`\`\``);
},
},
});
</script>

<style scoped>
.analysis-block {
margin-bottom: 20px;
}
p {
margin: 10px 0;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--secondary-button-text);
background: var(--secondary-color);
padding-left: 8px;
}
.copy-button {
color: var(--secondary-button-text) !important;
}
</style>
<template>
<Dialog
:visible="visible"
:header="header"
:modal="true"
:closable="true"
:style="{ width: '50vw' }"
@update:visible="$emit('update:visible', $event)"
>
<template v-if="analysisResults && analysisResults.length > 0" #default>
<div v-for="(analysis, index) in analysisResults" :key="index" class="analysis-block">
<h4>Tool: {{ analysis.tool_name }}</h4>
<p><strong>Category:</strong> {{ analysis.agent_capability_category }}</p>

<CodeBlockHeader language="python" :codecontent="encodeURIComponent(analysis.tool_input)">
<!-- eslint-disable-next-line vue/no-v-html -->
<pre v-html="renderCodeBlock(analysis.tool_input)"></pre>
</CodeBlockHeader>

<p v-if="analysis.tool_output"><strong>Output:</strong> {{ analysis.tool_output }}</p>
</div>
</template>

<template v-if="!analysisResults || analysisResults.length === 0">
<p>No analysis results available.</p>
</template>
</Dialog>
</template>

<script lang="ts">
import type { PropType } from 'vue';
import { marked } from 'marked';
import type { AnalysisResult } from '@/js/types';
export default {
name: 'AnalysisModal',
props: {
visible: {
type: Boolean,
required: true,
},
analysisResults: {
type: Array as PropType<Array<AnalysisResult>>,
required: true,
},
header: {
type: String,
default: 'Analysis',
},
},
emits: ['update:visible'],
methods: {
renderCodeBlock(code: string) {
return marked(`\`\`\`python\n${code}\n\`\`\``);
},
},
};
</script>

<style scoped>
.analysis-block {
margin-bottom: 20px;
}
p {
margin: 10px 0;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--secondary-button-text);
background: var(--secondary-color);
padding-left: 8px;
}
.copy-button {
color: var(--secondary-button-text) !important;
}
</style>
Loading

0 comments on commit 4a318f2

Please sign in to comment.