Skip to content

Commit

Permalink
Display a message index in messages tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@dragonstyle
dragonstyle committed Sep 4, 2024
1 parent f3b35b9 commit 3975d06
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 91 deletions.
104 changes: 58 additions & 46 deletions src/inspect_ai/_view/www/dist/assets/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7791,7 +7791,8 @@ const ApplicationIcons = {
user: "bi bi-person",
system: "bi bi-cpu",
assistant: "bi bi-robot",
tool: "bi bi-tools"
tool: "bi bi-tools",
unknown: "bi bi-patch-question"
},
running: "bi bi-stars",
sample: "bi bi-database",
Expand Down Expand Up @@ -13552,12 +13553,37 @@ const ChatView = ({ id, messages, style }) => {
}
const result = m$1`
<div style=${style}>
${collapsedMessages.map((msg) => {
return m$1`<${ChatMessage}
id=${`${id}-chat-messages`}
message=${msg}
toolMessages=${toolMessages}
/>`;
${collapsedMessages.map((msg, index) => {
if (collapsedMessages.length > 1) {
return m$1` <div
style=${{
display: "grid",
gridTemplateColumns: "max-content auto",
columnGap: "0.7em"
}}
>
<div
style=${{
fontSize: FontSize.smaller,
...TextStyle.secondary,
marginTop: "0.1em"
}}
>
${index + 1})
</div>
<${ChatMessage}
id=${`${id}-chat-messages`}
message=${msg}
toolMessages=${toolMessages}
/>
</div>`;
} else {
return m$1` <${ChatMessage}
id=${`${id}-chat-messages`}
message=${msg}
toolMessages=${toolMessages}
/>`;
}
})}
</div>
`;
Expand All @@ -13574,54 +13600,38 @@ const normalizeContent = (content) => {
}
};
const ChatMessage = ({ id, message, toolMessages }) => {
const iconCls = iconForMsg(message);
const icon = iconCls ? m$1`<i class="${iconCls}"></i>` : "";
const collapse = message.role === "system";
return m$1`
<div
class="container-fluid ${message.role}"
class="${message.role}"
style=${{
fontSize: FontSize.base,
fontWeight: "300",
paddingBottom: ".5em",
justifyContent: "flex-start",
marginLeft: "0",
marginRight: "0",
opacity: message.role === "system" ? "0.7" : "1",
whiteSpace: "normal"
}}
>
<div class="row row-cols-2">
<div
class="col"
style=${{
flex: "0 1 1em",
paddingLeft: "0",
paddingRight: "0.5em",
marginLeft: "0",
fontWeight: "500"
}}
>
${icon}
</div>
<div
class="col"
style=${{
flex: "1 0 auto",
marginLeft: ".3rem",
paddingLeft: "0"
}}
>
<div style=${{ fontWeight: "500", ...TextStyle.label }}>${message.role}</div>
<${ExpandablePanel} collapse=${collapse}>
<${MessageContents}
key=${`${id}-contents`}
message=${message}
toolMessages=${toolMessages}
/>
</${ExpandablePanel}>
</div>
<div style=${{
display: "grid",
gridTemplateColumns: "max-content auto",
columnGap: "0.3em",
fontWeight: "500",
marginBottom: "0.5em",
...TextStyle.label
}}>
<i class="${iconForMsg(message)}"></i>
${message.role}
</div>
<${ExpandablePanel} collapse=${collapse}>
<${MessageContents}
key=${`${id}-contents`}
message=${message}
toolMessages=${toolMessages}
/>
</${ExpandablePanel}>
</div>
`;
};
Expand Down Expand Up @@ -13658,15 +13668,17 @@ const MessageContents = ({ message, toolMessages }) => {
}
};
const iconForMsg = (msg) => {
let iconCls = ApplicationIcons.role.assistant;
if (msg.role === "user") {
iconCls = ApplicationIcons.role.user;
return ApplicationIcons.role.user;
} else if (msg.role === "system") {
iconCls = ApplicationIcons.role.system;
return ApplicationIcons.role.system;
} else if (msg.role === "tool") {
iconCls = ApplicationIcons.role.tool;
return ApplicationIcons.role.tool;
} else if (msg.role === "assistant") {
return ApplicationIcons.role.assistant;
} else {
return ApplicationIcons.role.unknown;
}
return iconCls;
};
const resolveToolMessage = (toolMessage) => {
var _a;
Expand Down
2 changes: 2 additions & 0 deletions src/inspect_ai/_view/www/src/appearance/Icons.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
* @property {string} system
* @property {string} assistant
* @property {string} tool
* @property {string} unknown
*/

/**
Expand Down Expand Up @@ -173,6 +174,7 @@ export const ApplicationIcons = {
system: "bi bi-cpu",
assistant: "bi bi-robot",
tool: "bi bi-tools",
unknown: "bi bi-patch-question",
},
running: "bi bi-stars",
sample: "bi bi-database",
Expand Down
101 changes: 56 additions & 45 deletions src/inspect_ai/_view/www/src/components/ChatView.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,12 +62,37 @@ export const ChatView = ({ id, messages, style }) => {

const result = html`
<div style=${style}>
${collapsedMessages.map((msg) => {
return html`<${ChatMessage}
id=${`${id}-chat-messages`}
message=${msg}
toolMessages=${toolMessages}
/>`;
${collapsedMessages.map((msg, index) => {
if (collapsedMessages.length > 1) {
return html` <div
style=${{
display: "grid",
gridTemplateColumns: "max-content auto",
columnGap: "0.7em",
}}
>
<div
style=${{
fontSize: FontSize.smaller,
...TextStyle.secondary,
marginTop: "0.1em",
}}
>
${index + 1})
</div>
<${ChatMessage}
id=${`${id}-chat-messages`}
message=${msg}
toolMessages=${toolMessages}
/>
</div>`;
} else {
return html` <${ChatMessage}
id=${`${id}-chat-messages`}
message=${msg}
toolMessages=${toolMessages}
/>`;
}
})}
</div>
`;
Expand All @@ -87,54 +112,38 @@ const normalizeContent = (content) => {
};

const ChatMessage = ({ id, message, toolMessages }) => {
const iconCls = iconForMsg(message);
const icon = iconCls ? html`<i class="${iconCls}"></i>` : "";
const collapse = message.role === "system";
return html`
<div
class="container-fluid ${message.role}"
class="${message.role}"
style=${{
fontSize: FontSize.base,
fontWeight: "300",
paddingBottom: ".5em",
justifyContent: "flex-start",
marginLeft: "0",
marginRight: "0",
opacity: message.role === "system" ? "0.7" : "1",
whiteSpace: "normal",
}}
>
<div class="row row-cols-2">
<div
class="col"
style=${{
flex: "0 1 1em",
paddingLeft: "0",
paddingRight: "0.5em",
marginLeft: "0",
fontWeight: "500",
}}
>
${icon}
</div>
<div
class="col"
style=${{
flex: "1 0 auto",
marginLeft: ".3rem",
paddingLeft: "0",
}}
>
<div style=${{ fontWeight: "500", ...TextStyle.label }}>${message.role}</div>
<${ExpandablePanel} collapse=${collapse}>
<${MessageContents}
key=${`${id}-contents`}
message=${message}
toolMessages=${toolMessages}
/>
</${ExpandablePanel}>
</div>
<div style=${{
display: "grid",
gridTemplateColumns: "max-content auto",
columnGap: "0.3em",
fontWeight: "500",
marginBottom: "0.5em",
...TextStyle.label,
}}>
<i class="${iconForMsg(message)}"></i>
${message.role}
</div>
<${ExpandablePanel} collapse=${collapse}>
<${MessageContents}
key=${`${id}-contents`}
message=${message}
toolMessages=${toolMessages}
/>
</${ExpandablePanel}>
</div>
`;
};
Expand Down Expand Up @@ -183,15 +192,17 @@ const MessageContents = ({ message, toolMessages }) => {
};

export const iconForMsg = (msg) => {
let iconCls = ApplicationIcons.role.assistant;
if (msg.role === "user") {
iconCls = ApplicationIcons.role.user;
return ApplicationIcons.role.user;
} else if (msg.role === "system") {
iconCls = ApplicationIcons.role.system;
return ApplicationIcons.role.system;
} else if (msg.role === "tool") {
iconCls = ApplicationIcons.role.tool;
return ApplicationIcons.role.tool;
} else if (msg.role === "assistant") {
return ApplicationIcons.role.assistant;
} else {
return ApplicationIcons.role.unknown;
}
return iconCls;
};

const resolveToolMessage = (toolMessage) => {
Expand Down

0 comments on commit 3975d06

Please sign in to comment.